小程序wepy上拉下拉解决方案

2023-10-13 01:18

本文主要是介绍小程序wepy上拉下拉解决方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!



列表上拉下拉加载数据是再常见不过的功能,第一个想到的是scroll-view组件,里面有两个事件,分别是bindscrolltoupper(拉到最顶部)和bindscrolltolower(拉到最底部),用bindscrolltoupper实现上拉效果极差,稍微滑一下就触发,也就是说一言不合就下拉刷新列表,体验很差,网上百度了很久说是scroll-view不能和onPullDownRefresh联用,不明觉厉,最后总结一下终结办法

先来张效果图



效果预览 
不用scroll-view组件 
在需要的页面打开配置(不需要在全局配置,我用的是wepy,不需要在app.wpy写)

config = {navigationBarTitleText: '测试上拉下拉',// 不要把true写成 'true'enablePullDownRefresh: true,// 不配成dark的话三个加载中的点会看不到,其实是出来了,只是三个点是白色的,如果你的页面背景也是白的,那就看不出效果了backgroundTextStyle: 'dark'
} 


来个长长的列表

<template><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view></view> 
</template>


关键事件

onPullDownRefresh() {console.log('下拉刷新列表')
}
onReachBottom() {console.log('上拉加载下一页')
} 

在微信开发者工具跑起来没什么问题,在真机跑一下,三个点下来以后竟然不上去了,很尴尬,最后在参考文章第二篇的评论里一位网友的回答解决了这个问题,手动让三个点弹回去,wx.stopPullDownRefresh(),小程序API里有,可以点这里自行看一下

onPullDownRefresh() {console.log('下拉刷新列表')// 5秒模拟数据加载setTimeout(function () {// 不加这个方法真机下拉会一直处于刷新状态,无法复位wepy.stopPullDownRefresh()}, 5000)
}
onReachBottom() {console.log('上拉加载下一页')
}

完整代码

<template><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view></view>
</template><script>import wepy from 'wepy'export default class Refresh extends wepy.page {config = {navigationBarTitleText: '测试上拉下拉',enablePullDownRefresh: true,backgroundTextStyle: 'dark'}components = {}data = {}computed = {}methods = {}events = {}onLoad() {}onPullDownRefresh() {console.log('下拉刷新列表')setTimeout(function () {// 不加这个方法真机下拉会一直处于刷新状态,无法复位wepy.stopPullDownRefresh()}, 5000)}onReachBottom() {console.log('上拉加载下一页')wepy.showToast({title: '上拉加载下一页',icon: 'none',mask: true,duration: 1000})} }
</script><style lang="less">
</style>


作者:一阵风fly
链接: 小程序wepy上拉下拉解决方案-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这篇关于小程序wepy上拉下拉解决方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/199753

相关文章

C#文件复制异常:"未能找到文件"的解决方案与预防措施

《C#文件复制异常:未能找到文件的解决方案与预防措施》在C#开发中,文件操作是基础中的基础,但有时最基础的File.Copy()方法也会抛出令人困惑的异常,当targetFilePath设置为D:2... 目录一个看似简单的文件操作问题问题重现与错误分析错误代码示例错误信息根本原因分析全面解决方案1. 确保

C# LiteDB处理时间序列数据的高性能解决方案

《C#LiteDB处理时间序列数据的高性能解决方案》LiteDB作为.NET生态下的轻量级嵌入式NoSQL数据库,一直是时间序列处理的优选方案,本文将为大家大家简单介绍一下LiteDB处理时间序列数... 目录为什么选择LiteDB处理时间序列数据第一章:LiteDB时间序列数据模型设计1.1 核心设计原则

SpringBoot3匹配Mybatis3的错误与解决方案

《SpringBoot3匹配Mybatis3的错误与解决方案》文章指出SpringBoot3与MyBatis3兼容性问题,因未更新MyBatis-Plus依赖至SpringBoot3专用坐标,导致类冲... 目录SpringBoot3匹配MyBATis3的错误与解决mybatis在SpringBoot3如果

C++ vector越界问题的完整解决方案

《C++vector越界问题的完整解决方案》在C++开发中,std::vector作为最常用的动态数组容器,其便捷性与性能优势使其成为处理可变长度数据的首选,然而,数组越界访问始终是威胁程序稳定性的... 目录引言一、vector越界的底层原理与危害1.1 越界访问的本质原因1.2 越界访问的实际危害二、基

Python 字符串裁切与提取全面且实用的解决方案

《Python字符串裁切与提取全面且实用的解决方案》本文梳理了Python字符串处理方法,涵盖基础切片、split/partition分割、正则匹配及结构化数据解析(如BeautifulSoup、j... 目录python 字符串裁切与提取的完整指南 基础切片方法1. 使用切片操作符[start:end]2

基于Python编写自动化邮件发送程序(进阶版)

《基于Python编写自动化邮件发送程序(进阶版)》在数字化时代,自动化邮件发送功能已成为企业和个人提升工作效率的重要工具,本文将使用Python编写一个简单的自动化邮件发送程序,希望对大家有所帮助... 目录理解SMTP协议基础配置开发环境构建邮件发送函数核心逻辑实现完整发送流程添加附件支持功能实现htm

C#控制台程序同步调用WebApi实现方式

《C#控制台程序同步调用WebApi实现方式》控制台程序作为Job时,需同步调用WebApi以确保获取返回结果后执行后续操作,否则会引发TaskCanceledException异常,同步处理可避免异... 目录同步调用WebApi方法Cls001类里面的写法总结控制台程序一般当作Job使用,有时候需要控制

Linux部署中的文件大小写问题的解决方案

《Linux部署中的文件大小写问题的解决方案》在本地开发环境(Windows/macOS)一切正常,但部署到Linux服务器后出现模块加载错误,核心原因是Linux文件系统严格区分大小写,所以本文给大... 目录问题背景解决方案配置要求问题背景在本地开发环境(Windows/MACOS)一切正常,但部署到

Java中InputStream重复使用问题的几种解决方案

《Java中InputStream重复使用问题的几种解决方案》在Java开发中,InputStream是用于读取字节流的类,在许多场景下,我们可能需要重复读取InputStream中的数据,这篇文章主... 目录前言1. 使用mark()和reset()方法(适用于支持标记的流)2. 将流内容缓存到字节数组

MybatisPlus中removeById删除数据库未变解决方案

《MybatisPlus中removeById删除数据库未变解决方案》MyBatisPlus中,removeById需实体类标注@TableId注解以识别数据库主键,若字段名不一致,应通过value属... 目录MyBATisPlus中removeBypythonId删除数据库未变removeById(Se