小程序使用scroll-view来实现数据上拉加载geng

189 阅读1分钟

  <scroll-view class="big" scroll-y="true" bindscrolltolower="gun"  style="height:{{height}}px;">    <view wx:for="{{list}}" wx:key="{{index}}">      <image src="{{item.images.small}}"></image>      <text>{{item.title}}</text>    </view>  </scroll-view>

思路:利用scroll-view的标签中定义好的方法来实现。(主要js代码请参考上一条发布内容)

可能用到的方法:

  • bindscrolltoupper :滚动到顶部/左边时触发
  • bindscrolltolower:滚动到底部/右边时触发

拓展:

  • 小程序中如何获取页面的宽度和高度:

     wx.getSystemInfo({    success: (res) => {      this.setData({        height:res.windowHeight      })    },  })  //同步请求

异步请求:wx.getSystemInfoSync()  //具体参考:https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfoSync.html

  • 需要注意的问题:必须设置页面的宽度,如果不设置的话,滚动到底部的事件就不会触发