一般在列表展示页面,会使用到上拉加载和下拉刷新功能,在scroll-view中有bindscrolltolower事件,可以实现上拉加载功能,但是却没法实现下拉刷新。

如需同时使用两种功能,解决步骤如下(以list页面为例):

1. 将scroll-view 改成普通的view, 并且设置样式

// list.wxss
page {
height: %;
} .container {
width: %;
height: %; // 或者 height: 100vh;
} // 其他样式略

2. 在根配置文件json或者当前页面的json文件设置 (建议在当前页面配置,因为其他页面并非一定需要下拉刷新功能)

 // list.json

 {
"enablePullDownRefresh": true
}

3. 在逻辑文件 js中添加功能

onReachBottom() {
// 上拉加载逻辑
} onPullDownRefresh() {
// 下载刷新逻辑
// wx.showLoading 或者 wx.showNavigationBarLoading() 作为交互提示
}

微信小程序scroll-view不能实现下拉刷新的更多相关文章

  1. 在微信小程序中,如何实现下拉刷新(模拟刷新)

    一.在app.json中启动刷新, 在Windows 中, 添加  "enablePullDownRefresh":"true" 二.在需要刷新的页面中写(若是 ...

  2. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  3. 微信小程序小程序使用scroll-view不能使用下拉刷新的解决办法

    <scroll-view class="movie-grid-container" scroll-y="true" scroll-x="fals ...

  4. 【微信小程序】scroll-view与Page下拉冲突

    需求:主界面是个列表.列表可以纵向滑动,下拉添加新的条目Item.每个条目Item可以横向滑动. 发现做下拉时,用Page的enablePullDownRefresh和scroll-view条目的横向 ...

  5. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  6. 微信小程序:picker组件实现下拉框效果

    一.wxml中代码 <view class="in_order_Param">             <text>状态:</text>     ...

  7. 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识

    下拉更新.分享.阅读标识 本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一 ...

  8. 微信小程序怎么用?线下商家最适合玩小程序

    随着微信小程序不断地释放新功能,许多行业越来越关注小程序,目前已经有不少餐饮和线下传统零售企业开始谋划利用好小程序.但是,线下商业有着复杂的场景,如何针对自己行业的特点和需求开发出属于自己的小程序,是 ...

  9. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  10. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

随机推荐

  1. Hadoop:hdfs文件permission denied问题解析

    Cron jobs can be scheduled, but fail to write parquet file and seems due to user permission of “yarn ...

  2. jd-gui在Ubuntu上打不开

    你在 ubuntu13.10上 安装了最新版本的 jd-gui 但是它跑不起来怎么办? 请执行如下指令: sudo apt-get install libgtk2.0-0:i386 libxxf86v ...

  3. go: writing stat cache:, permission denied

    sudo chown -R $(whoami):admin /Users/zhushuyan/go/pkg && sudo chmod -R g+rwx /Users/zhushuya ...

  4. 通过端口映射连接不同网段的oracle

    oracle在内网,只有特殊机器能访问,通过做端口映射,可以以这个特殊机器作为“跳板”完成本机对远程oracle的连接. “跳板”机器是windows,需要在该机器上执行netsh命令: netsh ...

  5. Git分支操作——查看、新建、删除、提交、合并

    查看分支 1 查看本地分支 $ git branch   2 查看远程分支 $ git branch -r     创建分支 1 创建本地分支 $ git branch branchName 2 切换 ...

  6. return在try...except...finally...中的表现

    一直以为return就直接退出函数了,最近遇到一情况,在try中return,并没有什么卵用,还是会去执行finally里的内容,导致不能正确返回想要的数据 一直以为return就会跳出函数,发现原来 ...

  7. Linux 开机启动顺序_005

    ***了解Linux开机启动顺序之前先了解一下Linux运行级别,通过inittab配置文件查看运行级别的定义: [root@oldboy ~]# cat /etc/inittab # Default ...

  8. Essay3.0发布,基于JavaScript的前后端同构博客系统

    前言 转眼间距离我开源这个项目已经两年了,最初是奔着学习的目的开发了这个项目,后来一直记录自己的学习笔记.随着时间的增长,发现之前写的代码简直不忍直视,于是就有了重构的想法.这个过程有些漫长,竟然用了 ...

  9. CentOS 7下安装samba

    Samba是一种软件,它可以运行在非Windows平台上,比如UNIX, Linux, IBM System 390, OpenVMS或其他操作系统.Samba使用安装在主机上的TCP/IP协议.当正 ...

  10. 【微信开发】cURL error 60: SSL certificate problem: unable to get local issuer certificate (see http://curl.haxx.se/libcurl/c/libcurl-errors.html)

    在做微信开发时候,请求为你接口报错: 解决方案: 1 下载cacert https://curl.haxx.se/ca/cacert.pem 2 修改 php.ini , 并重启 curl.cainf ...