小程序wepy上拉下拉如何解决

发布时间:2022-03-15 10:24:45 作者:iii
来源:亿速云 阅读:155

这篇文章主要介绍了小程序wepy上拉下拉如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇小程序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()

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>

关于“小程序wepy上拉下拉如何解决”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“小程序wepy上拉下拉如何解决”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 「小程序JAVA实战」小程序页面的上拉下拉刷新(50)
  2. 微信小程序如何实现上拉、下拉菜单功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序 wepy

上一篇:微信小程序api的知识点有哪些

下一篇:微信分销小程序有什么潜力

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》