微信小程序之判斷頁面滾動方向

崔曉明發布于2019-08-23 11:35 / 1017人閱讀

摘要：需求微信小程序中如果判斷頁面滾動方向解決方案用到微信小程序獲取頁面實際高度監聽用戶滑動頁面事件。

需求

微信小程序中如果判斷頁面滾動方向？

解決方案

1.用到微信小程序API

獲取頁面實際高度 nodesRef.boundingClientRect([callback])
監聽用戶滑動頁面事件onPageScroll。

2.獲取頁面實際高度

    /* JS */
  // 封裝函數獲取ID為box的元素實際高度 
  getScrollHeight: function() {
    wx.createSelectorQuery().select("#box").boundingClientRect((rect) => {
      this.setData({
        scrollHeight: rect.height
      })
      console.log(this.data.scrollHeight)
    }).exec()
  },
  // 假設數據請求
  getDataList: function() {
    wx.request({
      url: "test.php", //僅為示例，并非真實的接口地址
      success: function(res) {
      // 如果該元素下面的數據是動態獲取的，此方法在wx.request請求成功的回調函數中調用
        this.getScrollHeight()
      }
    })
  },

3.監聽用戶滑動頁面事件

    //監聽用戶滑動頁面事件
  onPageScroll: function(e) {
   
    if (e.scrollTop <= 0) {
     // 滾動到最頂部
      e.scrollTop = 0;
    } else if (e.scrollTop > this.data.scrollHeight) {
      // 滾動到最底部
      e.scrollTop = this.data.scrollHeight;
    }
    if (e.scrollTop > this.data.scrollTop || e.scrollTop >= this.data.scrollHeight) {
      //向下滾動 
      console.log("向下 ", this.data.scrollHeight)
    } else {
      //向上滾動 
      console.log("向上滾動 ", this.data.scrollHeight)
    }
    //給scrollTop重新賦值 
    this.data.scrollTop=e.scrollTop
    
  },

參考：微信小程序如何判斷頁面上下滾動

GPU云服務器云服務器頁面滾動方向微信小程序微信小程序支付微信小程序部署

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97161.html

小愛童鞋@你，一起來擼個小程序吧

摘要：輪播圖區域這里微信小程序給我們提供了組件，直接用就可以了。但是需要注意的是在微信小程序里，強烈推薦使用彈性布局首頁商品展示區這里的商品都是分塊展示，很有規律，因此整個商品展示都可以直接用遍歷出來。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...

MiracleWong 2019-08-29 15:40 評論0 收藏0
小愛童鞋@你，一起來擼個小程序吧

摘要：輪播圖區域這里微信小程序給我們提供了組件，直接用就可以了。但是需要注意的是在微信小程序里，強烈推薦使用彈性布局首頁商品展示區這里的商品都是分塊展示，很有規律，因此整個商品展示都可以直接用遍歷出來。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...

Pink 2019-08-22 17:59 評論0 收藏0
初探uni-app框架踩坑

摘要：近些天有接觸到框架，使用軟件進行編譯，能生成多端項目文件，如微信百度支付寶小程序及和端，記錄遇到的問題條件編譯我覺得比較突出的一點功能，就是這個條件編譯，指定對應的代碼執行在對應的一端僅在某平臺存在除了某平臺均存在如只在微信小程序中才執行近些天有接觸到uni-app框架，使用HBuilderX軟件進行編譯，能生成多端項目文件，如微信、百度、支付寶小程序及Android和ios端，記錄...

neu 2019-08-26 10:15 評論0 收藏0
微信小程序之選項卡

摘要：我們在函數中通過獲取設備的寬高來設置組件高度以及高度為導航欄的高度點擊導航欄切換內容點擊切換滑動內容切換導航欄滑動切換可滾動區域滾動最底刷新數據頁面上拉觸底事件的處理函數更新列表一個漂亮的選項卡就完成了完整案例選項卡隨處可見，微信小程序中也不例外，下面來寫一個簡單的小程序選項卡思路之前寫過基于swiper的選項卡，在小程序中有swiper組件，毫無疑問這里要用到swiper組件...

stormjun 2019-08-23 11:49 評論0 收藏0