微信小程序scroll-view不能实现下拉刷新

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

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

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

// list.wxsspage {
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;  // 或者 height: 100vh;
}

// 其他样式略

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

1 // list.json
2
3 {
4   "enablePullDownRefresh": true
5 }

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

onReachBottom() {
  // 上拉加载逻辑
}

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

原文地址:https://www.cnblogs.com/hughes5135/p/10321659.html

时间: 2024-09-30 21:54:48

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

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

一.在app.json中启动刷新, 在Windows 中, 添加  "enablePullDownRefresh":"true" 二.在需要刷新的页面中写(若是单个页面),反之,可写入app.js中: 结语:此列是模拟下拉刷新页面.若需要实时下拉刷新数据,需获取动态数据. 原文地址:https://www.cnblogs.com/skin-blue/p/8145157.html

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

下拉更新.分享.阅读标识 本文配套视频地址:https://v.qq.com/x/page/h0554... 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一篇中,我们把列表这块的剩余功能做完:下拉更新.分享.阅读标识. 下拉更新功能 下拉更新这个功能与我们在第一章中写的小 demo 所用方法一致:onReachBottom. 当用户滚动过程中触发了 上拉 这个动作时候,微信小程序会自动监听到并执行 onReachBottom 这个函数,所以我们只需要把这个监听事件写好就

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

随着微信小程序不断地释放新功能,许多行业越来越关注小程序,目前已经有不少餐饮和线下传统零售企业开始谋划利用好小程序.但是,线下商业有着复杂的场景,如何针对自己行业的特点和需求开发出属于自己的小程序,是摆在商家面前的一道难题. 公众号+小程序 在小程序诞生之前,很多企业纷纷将公众号作为O2O升级的重要渠道,但公众号的内容属性让它更侧重企业与用户建立线上的连接,而用完即走的小程序则被微信寄予连接更多的线下服务和场景,它将成为线下商业的最大入口,带来新零售的变革. 于是,微信将公众号与小程序连接在一起

【好程序员笔记分享】——下拉刷新和上拉加载更多

-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ iOS学习之路--下拉刷新和上拉加载更多 简介 本文中笔者将和大家分享应用app中常用到的表单内容的下拉刷新和上拉加载更多的功能实现的方法. 内容 1.有哪些实现方法与各方法的优劣 使用过美团,大众点评的朋友们应该有注意到,当你向上滑动表单的时候会有更多的店铺加载进你的表单中,而当你下滑表单顶的时候,则会刷新表单的内容 并从网络上获取最新的信息.通过下拉刷新和上拉加载更多的功能,使app可以获取更多用户想要

微信 小程序组件 分页菜单带下划线焦点切换

<view class="container"> <!-- menue --> <view class="aside flex"> <block wx:key="navList" wx:for="{{navList}}"> <view class="type-nav flexca" bindtap="selectNav" data-i

微信小程序将view动态填满全屏

一.在app.js利用官方方法获取设备信息 App({ onLaunch: function() { wx.getSystemInfo({ success: res => { this.globalData.systemInfo = res } }) }, globalData: { systemInfo: null } }) 获取到的windowWidth.windowHeight等度量单位为 px 二.在要使用的页面的js文件里将单位统一为rpx const app = getApp() P

微信小程序的view标签中text如何居中?

display:flex; align-items:center; justify-content:center; 原文地址:https://www.cnblogs.com/lsyy2017/p/11128497.html

微信小程序 解决 view 文字 过多 溢出的问题,超过行数后隐藏显示省略号

多行文本 .note_item text { display: -webkit-box; font-size: 28rpx; color: #000000; line-height: 40rpx; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } 单行文本 .note2_item text { displa

微信小程序上拉、下拉、动态设置窗口背景色

一.enablePullDownRefresh 1.下拉刷新enablePullDownRefresh的支持 单页面配置json文件 { "enablePullDownRefresh": true } app.json配置(所有页面都带有下拉刷新功能) { "window": { "enablePullDownRefresh": true } } 2.设置backgroundTextStyle大家会发现别人的小程序下拉刷新是有三个点闪烁的动画.自

微信小程序~下拉刷新PullDownRefresh

一.onPullDownRefresh回调 代码: // http://itlao5.com onPullDownRefresh: function () { console.log('onPullDownRefresh') this.queryData(id) }, 二.enablePullDownRefresh支持 然而=下拉触发不了js回调,需要再json中配置支持下拉刷新,即: "enablePullDownRefresh": true // 请注意是true,不是"