微信小程序小程序使用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下面,注意不要重复 ...
随机推荐
- SP1716 GSS3 - Can you answer these queries III(单点修改,区间最大子段和)
题意翻译 nnn 个数, qqq 次操作 操作0 x y把 AxA_xAx 修改为 yyy 操作1 l r询问区间 [l,r][l, r][l,r] 的最大子段和 题目描述 You are give ...
- js | javascript获取和设置元素的属性
获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...
- vs2017升级、安装
图解VS 2017升级并安装.NET Core 2.1 SDK https://jingyan.baidu.com/album/ff42efa9fb5816c19e2202ef.html?picind ...
- Mysql错误积累001-load data导入文件数据出现1290错误
错误出现情景 在cmd中使用mysql命令,学生信息表添加数据.使用load data方式简单批量导入数据. 准备好文本数据: xueshengxinxi.txt 文件 数据之间以tab键进行分割 ...
- ruby 第三方模块unirest使用
Creating Requests require 'unirest' response = Unirest.post 'http://httpbin.org/post', headers:{ Acc ...
- FTP 主动模式与被动模式
项目中涉及到媒资传输的地方,均有ftp应用,而关于媒资传输故障的排查中,FTP主被动模式问题占了较高比例,但又容易被忽略, 特此收集相关资料介绍,同时整理了如何通wget.tcpdum分辨FTP的主被 ...
- git的关于测试的相关的内容
今天,我们来讲一下git的分支的一些内容,在以前的时候,我一直都以为,对于一个项目,这个时候,我们把这个项目叫做项目a项目,这个a项目有master,staging,以及我自己的分支xxx,当我想上测 ...
- 3,jieba gensim 最好别分家之最简单的相似度实现
简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字",也有可能是"你是谁","你叫啥"之类的,这就引出了人工智能 ...
- 网易云terraform实践
此文已由作者王慎为授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.terraform介绍 随着应用上云的常态化,资源栈动态管理的需求对用户也变得更加急切.资源编排(Res ...
- Selenium LoadableComponent加载组件
继承LoadableComponent类可以在打开地址时, 判断浏览器是否打开了预期的网址, 需要重写load()与isLoad()方法: 即使没有定义get()方法, 也可以进行get()方法的调用 ...