移动端下拉分页

<u-divider text="到底了" :dashed="true"></u-divider>

searchData: { //查询条件
                    patientId: uni.getStorageSync('patient').patientId,
                    page: 1,
                    limit: 5,
                    orderPayStatus: 'DZF'
             },

 total: 0, //总条数

    // 触底的事件
 onReachBottom() {
            if (this.searchData.page * this.searchData.limit >= this.total) {
                this.$refs.uToast.show({
                    message: '数据加载完毕',
                    type: 'success'
                })
                return
            }

            // 让页码值自增+1
            this.searchData.page++
            this.getDataList()
      },

getDataList() {
                this.$u.api.myOrder(this.searchData).then(res => {
                    if (this.searchData.page != 1) {
                        this.list = this.list.concat(res.currentData)
                    } else {
                        this.list = res.currentData
                    }
                    this.total = res.totalRecord
                })

  },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现手机端下拉实现分页可以通过以下步骤完成: 1. 在 HTML 中添加一个容器元素,用于展示分页数据。例如: ```html <div id="pageContainer"></div> ``` 2. 在 JavaScript 中定义一个数据模型,用于存储分页数据和分页信息。例如: ```javascript var model = { data: [], currentPage: 0, pageSize: 10, hasMoreData: true }; ``` 3. 在 JavaScript 中定义一个视图模板,用于将数据模型渲染成 HTML。例如: ```javascript var template = function (data) { var html = ''; for (var i = 0; i < data.length; i++) { html += '<div>' + data[i] + '</div>'; } return html; }; ``` 4. 在 JavaScript 中定义一个控制器,用于处理用户下拉事件并更新数据模型。例如: ```javascript var controller = { init: function () { // 绑定下拉事件 document.addEventListener('touchstart', this.handleTouchStart); document.addEventListener('touchmove', this.handleTouchMove); document.addEventListener('touchend', this.handleTouchEnd); // 初始化数据 this.loadData(); }, handleTouchStart: function (e) { // 记录触摸起始位置 }, handleTouchMove: function (e) { // 判断是否下拉到顶部 // 如果是,则阻止默认事件 }, handleTouchEnd: function (e) { // 判断是否下拉到顶部 // 如果是,则加载下一页数据 }, loadData: function () { // 根据当前页码和每页大小加载数据 // 更新数据模型 // 渲染页面 } }; ``` 5. 在 JavaScript 中初始化控制器。例如: ```javascript controller.init(); ``` 这样就可以实现手机端下拉实现分页了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值