• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

【微信小程序】scroll-view 的上拉加载和下拉刷新

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  1、在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 .js 中 使用 Page.onPullDownRefreshPage.onReachButton 这样来进行。

  2、上面的做法是官方推荐我们做页面的 下拉刷新 和 上拉加载 所使用的方法。但某种情况比如头部是固定的,但使用上面的方法,整个页面都拉动,会显得很奇怪。这个时候,我们的滚动实际上是使用了 scroll-view 来进行的,会显得更加好看。

  3、使用 scroll-view 的话,会想到的是 bindscrolltoupper 和 bindscrolltolower,但其实使用这个两个也还是会出现问题的。这个问题是 bindscrolltoupper 会触发多次,而且一开始在顶部的时候,有可能没有响应到。

  

  下面的方法是使用 touchstart 和 touchend 来实现的 上拉加载 和 下拉刷新:

1 <scroll-view id="scroll-wrap"
2              scroll-y
3              bindtouchstart="start_fn" 
4              bindtouchend="end_fn">
5     // 列表
6 </scroll-view>   

 

  通常我们都写法,都如上面一样,但因为要拿到滚动的最大高度,所以需要写成下面的样式:

1 <scroll-view id="scroll-wrap"
2              scroll-top="{{scroll_top}}"
3              scroll-y>
4      <view id="inner-wrap"
5            bindtouchstart="start_fn" 
6            bindtouchend="end_fn">
7        // 列表
8      </view>
9 </scroll-view>

 

  我们需要获取 scroll-wrap 和 inner-wrap 的高度。

 1 Page({
 2     data: {
 3        height: 0, // scroll-wrap 的高度,这个高度是固定的
 4        inner_height: 0, // inner-wrap 的高度,这个高度是动态的
 5        scroll_top: 0, // 滚动到位置。
 6        start_scroll: 0, // 滚动前的位置。
 7        touch_down: 0 // 触摸时候的 Y 的位置
 8     },
 9     // start: onLoad 生命周期
10     onLoad () {
11        let self = this;
12        wx.createSelectorQuery().select(\'scroll-wrap\').boundingClientReact(function (rect) {
13            self.data.height = rect.height;
14        }).exec();
15     }
16     // end: onLoad 生命周期
17 });

 

  因为scroll-view 要在垂直方向上可以滚动,需要设置height 的高度,所以通常情况下,只要获取一次就行了,如果scroll-view 因为某个元素消失掉,影响了高度的话,记得要更新 height 的值。

  接下来就是 bindtouchstart 和 bindtouchend 的配合:

bindtouchstart  ----  start_fn:

 1 // start: 触摸开始
 2 start_fn (e) {
 3     let self = this;
 4     let touch_down = e.touches[0].clientY;
 5     this.data.touch_down = touch_down;
 6     // 获取 inner-wrap 的高度
 7     wx.createSelectorQuery().select(\'#inner-wrap\').boundingClientRect(function (rect) {
 8         self.data.inner_height = rect.height;
 9     }).exec();
10    
11     // 获取 scroll-wrap 的高度和当前的 scrollTop 位置
12     wx.createSelectorQuery().select(\'#scroll-wrap\').fields({
13         scrollOffset: true,
14         size: true
15     }, function (rect) {
16         self.data.start_scroll = rect.scrollTop;
17         self.data.height = rect.height;
18     }).exec();
19 } 
20 // end: 触摸开始

 

bindtouchend  ----  end_fn:

 1 // start: 触摸结束
 2 end_fn (e) {
 3     let current_y = e.changedTouches[0].clientY;
 4     let self = this;
 5     let { start_scroll, inner_height, height, touch_down } = this.data;
 6     /**
 7     * 1、下拉刷新
 8     * 2、上拉加载
 9     */
10     if (current_y > touch_down && current_y - touch_down > 20 && start_scroll == 0) {
11         // 下拉刷新 的请求和逻辑处理等
12     } else if (current_y < touch_down && touch_down - current_y >= 20 && inner_height - height == start_scroll) {
13        // 上拉加载 的请求和逻辑处理等
14     }
15 }
16 // end: 触摸结束

  原理就是触摸的时候,检查是否在顶部或者是底部,如果在顶部,还进行下拉,就进行刷新;如果在底部了,还进行上拉,就进行加载。使用 touchstart 和 touchend 的问题是用户必须要手指离开才会触发到。如果想要在顶部下拉就刷新,可以在 touchmove 中进行判断。

  需要注意的是,使用上面的方法,会使 scroll-view 上 绑定 bindscroll 、bindscrolltopupper 和 bindscrolltoploweper 等方法是无效的。

  样式和动画效果的优化,自己去进行吧。

  如果有更好的方法,可以在评论下,留下你的方法供大家学习。 

  这一篇的方法只适合安卓机的,但还是保留下来。

 

 

 

 

 

 

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序上拉加载和下拉刷新(wepy)发布时间:2022-07-18
下一篇:
微信小程序下拉刷新 并重新加载数据发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap