scroll-view组件实现下拉刷新, 拉到底加载更多

官方文档已声明,即使在page.json和app.json中开启下拉刷新,scroll-view组件也是不支持的。但我们可以通过曲线救国的方法来实现

实现代码

// wxml
 <scroll-view  style=‘height: 300px;‘
    scroll-y="{{true}}"
    scroll-top="{{scrollTop}}"
    bindscroll="scrollFn"
    bindscrolltolower="loadMore"
  >
    <view class="list" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view>
 </scroll-view>  
// js
Page({
  data: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    timer: null, // 保存定时器
    scrollTop: 5 // 设定触发条件的距离
  },
  onPullDownRefresh() {
  // 监听该页面用户下拉刷新事件
  // 可以在触发时发起请求,请求成功后调用wx.stopPullDownRefresh()来结束下拉刷新
   console.log(‘下拉拉拉‘)
  },
  refresh() { // 函数式触发开始下拉刷新。如可以绑定按钮点击事件来触发下拉刷新
    wx.startPullDownRefresh({
      success(errMsg) {
        console.log(‘开始下拉刷新‘, errMsg)
      },
      complete() {
        console.log(‘下拉刷新完毕‘)
      }
    }),
  },
  scrollFn(e) {
  // 防抖,优化性能
  // 当滚动时,滚动条位置距离页面顶部小于设定值时,触发下拉刷新
  // 通过将设定值尽可能小,并且初始化scroll-view组件竖向滚动条位置为设定值。来实现下拉刷新功能,但没有官方的体验好
    clearTimeout(this.timer)
    if (e.detail.scrollTop < this.data.scrollTop) {
      this.timer = setTimeout( () => {
        this.refresh()
      }, 350)
    }
  },
  loadMore() { // 触底加载更多
        let len = this.data.list.length,
        lastItem = this.data.list[len - 1];
        for(let i = 0; i< len; i++) {
          this.data.list.push(lastItem + i + 1)
          this.setData({
            ‘list‘: this.data.list
          })
        }
   }
})

onPullDownRefresh 和 wx.startPullDownRefresh 的区别

onPullDownRefresh : 下拉刷新。官方认为下拉一定距离并释放,为一次完整的下拉刷新,页面的onPullDownRefresh 才能监听到。因此,如果触发开始下拉,但仍长按不释放,不会被识别为一次完整的下拉刷新,onPullDownRefresh 无法监听到
wx.startPullDownRefresh:开始下拉刷新。因此即使下拉一定距离触发仍长按不释放,也能触发。

说的有点乱,可以按正常下拉释放和下拉并长按一段时间再释放,来查看控制台结果的差异

转 : https://blog.csdn.net/ishowman/article/details/79536163

原文地址:https://www.cnblogs.com/fps2tao/p/11165562.html

时间: 2024-11-08 21:37:35

scroll-view组件实现下拉刷新, 拉到底加载更多的相关文章

IOS学习之UiTableView下拉刷新与自动加载更多,百年不变的效果

IOS学习之UiTableView下拉刷新与自动加载更多,百年不变的效果(五) 五一劳动节马上来临,小伙伴有妹有很激动哟,首先祝天下所有的程序猿节日快乐!这个五一对于我来说有点不一样,我的人生从这个五一就转弯了,爱情长跑8年的我结婚了,一会支付宝账号我会公布出去,请自觉打款!谢谢合作. 灯光闪起来: 舞蹈跳起来: 歌曲唱起来: -------------------------------------------------------------------------------------

Android下拉刷新库,利用viewdraghelper实现,集成了下拉刷新,底部加载更多,数据初始加载显示loading等功能

项目Github地址:https://github.com/sddyljsx/pulltorefresh Android下拉刷新库,利用viewdraghelper实现. 集成了下拉刷新,底部加载更多,以及刚进入加载数据的loadview.包括了listview与gridview的改写. 效果1: 效果2: 效果3: 效果4: 效果5: 使用说明: imageList=(ListView)findViewById(R.id.image_list); imageAdapter=new ImageA

Android ListView 下拉刷新 点击加载更多

最近项目中用到了ListView的下拉刷新的功能,总结了一下前辈们的代码,单独抽取出来写了一个demo作为示例. 效果图 下拉刷新: 加载更多: CustomListView.java [java] view plaincopy package com.example.uitest.view; import java.util.Date; import com.example.uitest.R; import android.content.Context; import android.uti

十分钟实现ListView下拉刷新上滑加载更多

说到ListView下拉刷新几乎每个APP都会用到,所以ListView下拉刷新是很重要的,就像ListView优化一样是你必会的东西. ListView实现下拉刷新如果我们开发人员自己编写相对来说比较费事的,当我们使用第三方库之后我们再来开发这个功能就会省事很多.相比与自己实现可以少编写不少代码,Android-PullToRefresh库可以轻松实现ListView的下拉刷新功能. 要使用Android—PullToRefesh库对ListView实现下拉刷新要经过以下几个步骤: 1.下载A

支持下拉刷新和上划加载更多的自定义RecyclerView(仿XListView效果)

首先看效果 下拉刷新:        上划加载        在项目更新的过程中,遇到了一个将XListView换成recyclerView的需求,而且更换完之后大体效果不能变,但是对于下拉刷新这样的效果,谷歌给出的解决方案是把RecyclerView放在一个SwipeRefreshLayout中,但是这样其实是拉下一个小圆形控件实现的,和XListView的header效果不同.在网上找了很多的别人代码,都没有实现我想要的效果,于是自己动手写了一个. 具体实现的效果有以下几条 下拉刷新功能:

最新Android ListView 下拉刷新 上滑加载

开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,之前大家最常用的应该是pull to refresh或它的变种版吧,google官方在最新的android.support.v4包中增加了一个新类SwipeRefreshLayout,地址 这个类的作用就是提供官方的下拉刷新,并且效果相当不错,而上拉加载更多则用我们自定义的listview,也是相当简单. 下拉刷新 简单的介绍下: 首先它是一个viewgroup,但是它只允许有一个子控件,子控件能是任何view,使用的时候,所在

Android 自定义 ListView 上下拉动&ldquo;刷新最新&rdquo;和&ldquo;加载更多&rdquo;歌曲列表

本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码太多,点击此处下载,自己调试一下. 下载 Demo 环境 Windows 2008 R2 64 位 Eclipse ADT V22.6.2,Android 4.4.3 SAMSUNG GT-I9008L,Android OS 2.2.2 测试数据 本演示的歌曲信息,共有 20 条,包括歌手名.歌曲名.时长.缩

Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/details/78781682 ,这里是看了之后,结合自己实际遇到的问题写的. 首先引入包. //下拉框 implementation 'com.android.support:recyclerview-v7:28.0.0-beta01' implementation 'com.scwang.smar

Android第二十三期 - 256k的ListView下拉刷新和滚动加载数据

代码已经