开发小程序分页功能时的这些坑你遇到过吗?

开发小程序分页功能时的这些坑你遇到过吗?

2021-08-27 687
下载不了?请联系网站客服提交链接错误!
增值服务:
开发小程序分页功能时的这些坑你遇到过吗?
最近更新 2021年08月27日
资源编号 105642

开发小程序分页功能时的这些坑你遇到过吗?

2021-08-27 小程序教程 0 687 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

微信小程序开发中list列表经常要进行分页处理,踩坑在所难免。

app.json

\"enablePullDownRefresh\"true

wxml

<view wx:if=\"{{showEmpty}}\">暂无数据</view>
<scroll-view wx:else scroll-y=\"true\" style=\"height: 100vh\" bindscrolltolower=\"getMoreList\">
  <view wx:for=\"{{list}}\" wx:key=\"index\">
    // ...内容省略
  </view>
</scroll-view>

js

const httpUtil = require(\'../../../utils/httpUtil.js\')  // 网络请求工具
const api = require(\'../../../config/api.js\')           // api文件
const size = 10;   // 每页数据量
let current = 1;   // 当前页数
let maxPage = 0;   // 最大页数

Page({
  data: {
    showEmptyfalse,
    list: []
  },
  getList() {
    const that = this
    httpUtil.getRequest(api.getRecordList, {
      current,
      size
    }, (res) => {
      // ...内容省略
    }, () => {})
  },
  
  getMoreList() {
    if (current < maxPage) {
      current++;
      this.getList();
    }
  },
  onLoadfunction (options{
    this.getList()
  },
  onPullDownRefreshfunction ({
    current = 1;
    this.getList();
    wx.stopPullDownRefresh();
  }
})

看似没问题的分页逻辑代码,存在3个大坑

坑一:再次进入页面,curent变量不会重置

解决方法1:

onLoad: function (options{
  current = 1;
  maxPage = 0;
  this.getList()
},

解决方法2:

Page({
  data: {
    showEmptyfalse,
    list: []
  },
  current1,   // 运用时this.current
  maxPage0    // 运用时this.maxPage
})

坑二:onPullDownRefresh与scroll-view的刷新功能冲突,将会失效

解决方法:(view替换scroll-view)

<view wx:if=\"{{showEmpty}}\">暂无数据</view>
<view wx:else style=\"height: 100vh\">
  <view wx:for=\"{{list}}\" wx:key=\"index\">
    // ...内容省略
  </view>
</view>

js:

  onReachBottom: function ({
    if (current < maxPage) {
      current++;
      this.getDeviceList();
    }
  },

坑三:size值偏小,永远无法触底

如果一个页面,每条item高度较小。第一页加载完后无法撑满整个页面的高度,这样将永远无法触发页面底部加载更多的方法

解决方法:增加每页的加载量,size增大

const size = 15;   // 每页数据量


页面仔小杨 【实战干货、原创分享】

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 开发小程序分页功能时的这些坑你遇到过吗? https://www.k4sc.com/105642.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务