微信小程序小程序使用scroll-view不能使用下拉刷新的解决办法
<scroll-view class="movie-grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="loadMoreMovie">
<block wx:for="{{movies}}" wx:key="{{item}}">
<view class="movie">
<template is="movieTemplate" data="{{...item}}" />
</view>
</block>
<text class="has-no-more" wx:if="{{hasNoMore}}">没有更多了</text>
</scroll-view>
注意,此时scroll-view必须给一个高度才能实现下拉刷新。文档中也有说道此组件会使不能在组件区域内触发下拉刷新onPullDownRefresh事件。
解决办法:
使用view组件,
<view class="movie-grid-container">
<block wx:for="{{movies}}" wx:key="{{item}}">
<view class="movie">
<template is="movieTemplate" data="{{...item}}" />
</view>
</block>
<text class="has-no-more" wx:if="{{hasNoMore}}">没有更多了</text>
</view>
此时view可不用设置高度
1. 实现下拉刷新
在.json文件中配置 "enablePullDownRefresh": true,然后在.js中
onPullDownRefresh: function(event) {
//此处可实现下拉刷新数据,刷新完数据最好 wx.stopPullDownRefresh();
},
2. 实现上拉加载更多
只需要在.js中
onReachBottom: function(event) {
wx.showNavigationBarLoading(); //显示导航栏加载按钮
//加载完记得 wx.hideNavigationBarLoading();
}
微信小程序小程序使用scroll-view不能使用下拉刷新的解决办法的更多相关文章
- 微信小程序~下拉刷新PullDownRefresh
一.onPullDownRefresh回调 代码: // http://itlao5.com onPullDownRefresh: function () { console.log('onPul ...
- 微信小程序 下拉刷新 上拉加载
1.下拉刷新 小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调. 1. 需要在 .json 文件中配置. 如果配置在app.json文件中,那么整个程序都可以下拉刷新. ...
- 微信小程序开发之 下拉刷新,上拉加载更多
本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多 先开看一下界面 大致如此的界面吧. 这个Demo使用了微信的几个Api和事件,我先列出来. 1.wx.request (获取远程服务器的数据, ...
- 微信小程序-自定义下拉刷新
最近给别个公司做技术支持,要实现微信小程序上拉刷新与下拉加载更多 微信给出的接口不怎么友好,最终想实现效果类似QQ手机版 ,一共3种下拉刷新状态变化,文字+图片+背景颜色 最终实现后的效果(这里提示有 ...
- 微信小程序下拉刷新和上拉加载
小程序知识点二 1.上拉加载和下拉刷新 Wxml文件 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true& ...
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个binds ...
- 【微信小程序】scroll-view 的上拉加载和下拉刷新
1.在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 ...
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- 微信小程序的下拉刷新
微信小程序的下拉刷新:在page的js文件中有监听用户下拉刷新的处理函数onPullDownRefresh:function(){} //js文件中自带的处理函数,在onUnload下面,注意不要重复 ...
随机推荐
- 手机浏览器页面点击不跳转(Android手机部分浏览器) 浏览器双击放大网页 解决
手机端web网页项目(angluar js 1.4.6) 1,网页项目开发过程中,使用PC浏览器能正常访问,IOS设备浏览器也能正常访问,但是使用Android部分浏览器进行访问的时候,链接偶尔不跳转 ...
- #leetcode刷题之路29- 两数相除
给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符.返回被除数 dividend 除以除数 divisor 得到的商. 示例 1:输入: ...
- C++ vector用法积累
1. vector的初始化 2. vector基本操作 2.1 vector属性 size resize 2.2 vector操作 插入 在最后插入一个元素 push_back() 删除 在最后删除一 ...
- 树莓派官方推荐的VNC Viewer配置详解Raspberry Pi3 B+
1GB内存,16GB硬盘容量.这是我目前使用的Pi3树莓派. SVN Viewer远程连接,台式机192.168.1.102连接局域网192.168.1.110上的树莓派.使用的软件是: https: ...
- 02 shell编程之条件语句
Shell编程之条件语句 学习目标: 掌握shell脚本条件测试 掌握if语句编程 目录结构: 条件测试 条件测试概述 l 对特定的条件进行判断,以决定如何执行操作 l 测试的方法 方法1:tes ...
- Apache Maven(三):POM
什么是 POM? POM (Project Object Model) 项目对象模型.它是一个XML文件,其中包含有关Maven用于构建项目的项目和配置细节的信息.它包含大多数项目的默认值.例如,构建 ...
- 【Js】JSON对象、JSON字符的使用总结
JSON对象 / JSON字符串区别 抛出一个最常见的疑问:什么是“JSON对象”,什么是“JSON字符串”,它俩的区别是什么? 废话不多说,直接上代码. 1.JSON对象: // javascrip ...
- 图的遍历(Python实现)
图的遍历(Python实现) 记录两种图的遍历算法——广度优先(BFS)与深度优先(DFS). 图(graph)在物理存储上采用邻接表,而邻接表是用python中的字典来实现的. 两种遍历方式的代码如 ...
- SVM中的间隔最大化
参考链接: 1.https://blog.csdn.net/TaiJi1985/article/details/75087742 2.李航<统计学习方法>7.1节 线性可分支持向量机与硬间 ...
- Java学习笔记四:Java的八种基本数据类型
Java的八种基本数据类型 Java语言提供了八种基本类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. Java基本类型共有八种,基本类型可以分为三类,字符类型char,布 ...