用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2018-6-9 00:09

列表上拉下拉加载数据是再常见不过的功能,第一个想到的是scroll-view组件,里面有两个事件,分别是bindscrolltoupper(拉到最顶部)和bindscrolltolower(拉到最底部),用bindscrolltoupper实现上拉效果极差,稍微 ...

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

先来张效果图

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

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

来个长长的列表

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

关键事件

  1. onPullDownRefresh() {
  2. console.log('下拉刷新列表')
  3. }
  4. onReachBottom() {
  5. console.log('上拉加载下一页')
  6. }

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

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

完整代码

  1. <template>
  2. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  3. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
  4. <view wx:if="{{i <= j}}">
  5. {{i}} * {{j}} = {{i * j}}
  6. </view>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. import wepy from 'wepy'
  12. export default class Refresh extends wepy.page {
  13. config = {
  14. navigationBarTitleText: '测试上拉下拉',
  15. enablePullDownRefresh: true,
  16. backgroundTextStyle: 'dark'
  17. }
  18. components = {
  19. }
  20. data = {
  21. }
  22. computed = {
  23. }
  24. methods = {
  25. }
  26. events = {
  27. }
  28. onLoad() {
  29. }
  30. onPullDownRefresh() {
  31. console.log('下拉刷新列表')
  32. setTimeout(function () {
  33. // 不加这个方法真机下拉会一直处于刷新状态,无法复位
  34. wepy.stopPullDownRefresh()
  35. }, 5000)
  36. }
  37. onReachBottom() {
  38. console.log('上拉加载下一页')
  39. wepy.showToast({
  40. title: '上拉加载下一页',
  41. icon: 'none',
  42. mask: true,
  43. duration: 1000
  44. })
  45. }
  46. }
  47. </script>
  48. <style lang="less">
  49. </style>



鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 一阵风fly 来自: 简书