官方文档已声明,即使在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

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

  1. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  2. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  3. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  4. ListView上拉刷新和分页加载完整的Dome

    很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...

  5. 第三方 XListview 上拉加载、下拉刷新、分页加载和Gson解析

    注意:此Demo用的是第三方的Xlistview.jar,需要复制me文件夹到项目中,两个XML布局文件和一张图片 把下面的复制到String中 <string name="xlist ...

  6. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  7. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

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

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  9. 微信小程序下拉刷新 并重新加载数据

    1.在json页面配置: { "enablePullDownRefresh": true } 2.调用刷新函数 onPullDownRefresh: function() { wx ...

随机推荐

  1. 在pivotal cloud foundry上申请账号和部署应用

    Created by Wang, Jerry, last modified on Jul 04, 2016 URL: http://run.pivotal.io/ maintain your mobi ...

  2. Mac下多版本JDK安装及管理

    在Java项目中,经常对JDK版本有不同的要求,可是不可能为了某个项目的运行重新下载不同版本JDK进行安装,这样就涉及到对本地环境中多个JDK版本的管理. Mac的JDK都是安装到一个指定目录的:/L ...

  3. shell 数学运算

    数学运算之 expr expr操作符对照表 比较大小,只能对整数进行比较,需要加空格,linux 保留关键字要转义 num1=30 num2=50 expr $num1 \> $num2 查看上 ...

  4. Django中过滤的实现

    过滤模块 安装 >: pip install django-filter 注册应用:settings/dev.py INSTALLED_APPS = [ # 列表过滤模块 'django_fil ...

  5. Cknife流量分析

    本文首发:https://<img src=1 onerror=\u006coc\u0061tion='j\x61v\x61script:\x61lert\x281\x29'>testde ...

  6. Win10 hosts文件无法保存

    Win10无法修改编辑保存hosts文件怎么办?Win10系统默认是没有权限去编辑保存系统里的文件,这也是权限不够才导致修改编辑hosts后无法保存的原因,解决的办法就是把自己的帐户权限给提高就行了. ...

  7. Java stackoverflowerror异常与outofmemoryerror异常区别

    1.stackoverflow: 每当java程序启动一个新的线程时,java虚拟机会为他分配一个栈,java栈以帧为单位保持线程运行状态:当线程调用一个方法是,jvm压入一个新的栈帧到这个线程的栈中 ...

  8. MySQL进阶18- 存储过程- 创建语句-参数模式(in/out/inout-对应三个例子) -调用语法-delimiter 结束标记'$'- 删除/查看/修改-三个练习

    /* MySQL-进阶18 存储过程 和 函数 存储过程和函数:类似于java中的方法 好处: 1.提高代码的重用性 2.简化操作 */ #存储过程 /* 含义: 一组已经预见编译好的SQL语句的集合 ...

  9. 记录 ubuntu 安装中文语言出现 software database is broken

    在终端下执行 sudo apt-get install  language-pack-zh-han* 然后去语言中心设置中文,并全局使用即可.

  10. LOJ P10148 能量项链 题解

    Analysis 区间dp裸题,因为是环所以存两次 #include<iostream> #include<cstdio> #include<cstring> #i ...