<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不能使用下拉刷新的解决办法的更多相关文章

  1. 微信小程序~下拉刷新PullDownRefresh

      一.onPullDownRefresh回调 代码: // http://itlao5.com onPullDownRefresh: function () { console.log('onPul ...

  2. 微信小程序 下拉刷新 上拉加载

    1.下拉刷新  小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调. 1. 需要在 .json 文件中配置. 如果配置在app.json文件中,那么整个程序都可以下拉刷新. ...

  3. 微信小程序开发之 下拉刷新,上拉加载更多

    本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多 先开看一下界面 大致如此的界面吧. 这个Demo使用了微信的几个Api和事件,我先列出来. 1.wx.request (获取远程服务器的数据, ...

  4. 微信小程序-自定义下拉刷新

    最近给别个公司做技术支持,要实现微信小程序上拉刷新与下拉加载更多 微信给出的接口不怎么友好,最终想实现效果类似QQ手机版 ,一共3种下拉刷新状态变化,文字+图片+背景颜色 最终实现后的效果(这里提示有 ...

  5. 微信小程序下拉刷新和上拉加载

    小程序知识点二 1.上拉加载和下拉刷新 Wxml文件 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true& ...

  6. 微信小程序实战篇-下拉刷新与加载更多

    下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个binds ...

  7. 【微信小程序】scroll-view 的上拉加载和下拉刷新

    1.在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 ...

  8. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  9. 微信小程序的下拉刷新

    微信小程序的下拉刷新:在page的js文件中有监听用户下拉刷新的处理函数onPullDownRefresh:function(){} //js文件中自带的处理函数,在onUnload下面,注意不要重复 ...

随机推荐

  1. Spring的声明式事务----Annotation注解方式(2)

    使用步骤: 步骤一.在spring配置文件中引入<tx:>命名空间<beans xmlns="http://www.springframework.org/schema/b ...

  2. git简单配置

    1.安装完git查看版本 git --version 2.配置用户名邮箱 git config --global user.name "chencheng" git config ...

  3. javascript--鼠标拖拽窗口案例(鼠标按下,在鼠标移动过程中,盒子跟着一起移动,鼠标松开,盒子停止移动)

    界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...

  4. dedesmc 手机端生成静态页

    dedesmc 手机端生成静态页 1.首先下载插件,下载地址:https://pan.baidu.com/s/1Nfx_KBYuxRkZ7VzoPxy28g 密码:83x7 2.进入 dedecms ...

  5. 微信小程序 嵌套循环

    前言 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for="{{items} ...

  6. QOS-CBQ概述

     QOS-CBQ概述 2018年7月7日    19:56 CBQ(基于类的对列)是一种基于QOS policy实现的拥塞管理技术. CBQ中包含一个LLQ(低延迟队列),用来支撑EF(快速转发)类业 ...

  7. C语言实现简易扫雷

    首先,写代码之前要将整体思路写出来: 扫雷游戏:1.需要两个二维数组,一个用来展示,一个用来放雷; 2.整体骨架在代码中都有注释说明; 3.游戏难度比较简单,适合初学者观看,如果有大佬看明白,可以指点 ...

  8. Redis 在springBoot中的一个使用示例

    在现系统中使用了一个字典表,更新或插入字典表需要做Redis缓存 @Override @Cache(name = Constants.REDIS_PREFIX_DIC, desc = "变更 ...

  9. debounce、throttle、requestAnimationFrame

    今天review同事代码,代码实现了返回顶部的功能,用到了lodash库中的throttle,我看着眼生,于是乎去看了下lodash文档,然后牵出了debounce,具体的知识点,这里不再赘述,底部的 ...

  10. struts2学习笔记一

    一.框架概述 1.框架的意义与作用: 所谓框架,就是把一些繁琐的重复性代码封装起来,使程序员在编码中把更多的经历放到业务需求的分析和理解上面. 特点:封装了很多细节,程序员在使用的时候会非常简单. 2 ...