betway必威-betway必威官方网站
做最好的网站

上滑加载更多

  • 微信小程序进阶开发-checkbox 运用、form 表单取值和提交
  • 微信小程序进阶开发-wx:for 循环列表
  • 微信小程序进阶开发-wx:key 高级列表循环
  • 微信小程序进阶开发-顶部菜单、利用 data 属性实现菜单当前项
  • 微信小程序进阶开发-下拉刷新
  • 微信小程序进阶开发-上滑加载更多
  • 微信小程序进阶开发-picker 实现选择框、时间选择、日期选择、性别选择……
  • 微信小程序进阶开发-模态输入对话框

微信小程序自带有下拉刷新,但是没有自带上滑加载更多,不过网上说可以用 scroll-view 来实现。

但是我并不推荐 scroll-view,不过我们还是先看看用 scroll-view 的做法,再介绍一下我的做法。

<scroll-view style="height:500rpx;" scroll-y="true" bindscrolltoupper="loadNew" bindscrolltolower="loadMore"> <block wx:for="{{items}}"> <view class="section"> <video src="{{item.videoUrl}}" controls></video> <text>{{item.title}}</text> </view> </block> </scroll-view>

一定要有两个属性:

  • 一是在样式中指定 height。
  • 二是指定 scroll-y 为 true。

然后就可以用 bindscrolltoupper 监测滑到最上头了,用 bindscrolltolower 监测滑到最下头了。理论上它可以实现上拉刷新、下拉加载更多两种效果,但是效果不是很好。

而且它是滑到端头就响应事件,并不是需要继续拉一段距离才响应,这点不如 enablePullDownRefresh 完美。

还有:微信并不推荐在 scroll-view 中使用 textarea、map、canvas、video 组件。

还有: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh。

所以还是介绍新的方案吧:onReachBottom

虽然也没有实现继续拉一段距离才响应,但是整个效果比 scroll-view 好多了。

Page({ onReachBottom: function() { this.loadList(); } })

 

  • 微信小程序进阶开发-checkbox 运用、form 表单取值和提交
  • 微信小程序进阶开发-wx:for 循环列表
  • 微信小程序进阶开发-wx:key 高级列表循环
  • 微信小程序进阶开发-顶部菜单、利用 data 属性实现菜单当前项
  • betway必威官方网站,微信小程序进阶开发-下拉刷新
  • 微信小程序进阶开发-上滑加载更多
  • 微信小程序进阶开发-picker 实现选择框、时间选择、日期选择、性别选择……
  • 微信小程序进阶开发-模态输入对话框

本文由betway必威发布于编程开发,转载请注明出处:上滑加载更多

TAG标签: betway必威
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。