微信小程序scroll-view不能实现下拉刷新
一般在列表展示页面,会使用到上拉加载和下拉刷新功能,在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不能实现下拉刷新的更多相关文章
- 在微信小程序中,如何实现下拉刷新(模拟刷新)
一.在app.json中启动刷新, 在Windows 中, 添加 "enablePullDownRefresh":"true" 二.在需要刷新的页面中写(若是 ...
- 微信小程序中如何实现分页下拉加载?(附源码)
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- 微信小程序小程序使用scroll-view不能使用下拉刷新的解决办法
<scroll-view class="movie-grid-container" scroll-y="true" scroll-x="fals ...
- 【微信小程序】scroll-view与Page下拉冲突
需求:主界面是个列表.列表可以纵向滑动,下拉添加新的条目Item.每个条目Item可以横向滑动. 发现做下拉时,用Page的enablePullDownRefresh和scroll-view条目的横向 ...
- 微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
- 微信小程序:picker组件实现下拉框效果
一.wxml中代码 <view class="in_order_Param"> <text>状态:</text> ...
- 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识
下拉更新.分享.阅读标识 本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一 ...
- 微信小程序怎么用?线下商家最适合玩小程序
随着微信小程序不断地释放新功能,许多行业越来越关注小程序,目前已经有不少餐饮和线下传统零售企业开始谋划利用好小程序.但是,线下商业有着复杂的场景,如何针对自己行业的特点和需求开发出属于自己的小程序,是 ...
- 关于微信小程序获取view的动态高度填坑
wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...
- 微信小程序scroll标签的测试
一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...
随机推荐
- git本地项目代码上传至码云远程仓库总结【转】
转载自 :https://blog.csdn.net/fox9916/article/details/78253714 git基本使用小结 之前公司的版本控制工具一直用的是svn,最近要改用git,之 ...
- Linux中rz和sz命令用法详解
http://www.111cn.net/sys/linux/67810.htm 在linux中rz 和 sz 命令允许开发板与主机通过串口进行传递文件了,下面我们就来简单的介绍一下rz 和 sz 命 ...
- 干货 | Ansible 上手指南
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/O4dC8OjO7ZL6/article/details/79765539 点击上方"中兴开 ...
- ubuntu cli
查看安装包的路径 dpkg -L redis-server 防火墙 ufw redis 相关 service redis-server restart
- Flask-SQLAlchemy 中多表链接查询(不使用外键)
SQLAlchemy 是一个功能强大的 ORM . Flask-SQLAlchemy 是一个 Flask 插件,它让我们在 Flask 框架中使用 SQLAlchemy 变得更容易. 本篇介绍我在使用 ...
- 如何查看MySQL单个数据库或者表的大小
总体来说,这些信息存在于information_schema数据库的TABLES表中 mysql> desc information_schema.TABLES; +-------------- ...
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- 1.9flask sqlalchemy和wtforms
2019-1-9 15:28:07 还有2天视频flask结束,然后到爬虫了 发现好快 学的东西好多! 到时候来个综合整理!!!! 越努力,越幸运!!! sqlalchemy 参考连接: https: ...
- Vue中axios踩坑之路-POST传参
https://blog.csdn.net/call_me_fly/article/details/79012581
- linux的基本操作(mysql 的基本操作)
Mysql 的基本操作 在前面两个章节中已经介绍过MySQL的安装了,但是光会安装还不够,还需要会一些基本的相关操作.当然了,关于MySQL的内容也是非常多的,只不过对于linux系统管理员来讲,一些 ...