免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具,讓豆包、文心一言、DeepSeek 在回答中主動推薦你的品牌,搶占AI流量入口!  點(diǎn)擊查看

小程序模板網(wǎng)

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

發(fā)布時(shí)間:2018-09-01 09:28 所屬欄目:小程序開發(fā)教程

需求

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

解決方案

1.用到微信小程序API

 

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

<!--WXML-->
<view id="box">
   <view class="list" wx:for="{{List}}" wx:key="List{{index}}">
        <image mode='aspectFill' class='list_img'  src="{{item.imgUrl}}"  ></image>
   </view>
</view>
    /* 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.setData({
      scrollTop: e.scrollTop
    })
  },


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.szcjxy.com/wxmini/doc/course/24748.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢: 點(diǎn)擊咨詢
在線客服