成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

崔曉明 / 1042人閱讀

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

需求

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

解決方案

1.用到微信小程序API

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

2.獲取頁面實(shí)際高度



   
        
   

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

3.監(jiān)聽用戶滑動頁面事件

    //監(jiān)聽用戶滑動頁面事件
  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
    
  },

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97161.html

相關(guān)文章

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

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

    MiracleWong 評論0 收藏0

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

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

    Pink 評論0 收藏0

  • 初探uni-app框架 踩坑

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

    neu 評論0 收藏0

  • 微信小程序之選項(xiàng)卡

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

    stormjun 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<