微信小程序分页加载

1.app.json中:

"window": {
  "enablePullDownRefresh": true //是否开启当前页面下拉刷新
}

 

2.wxml中:

 

<view class="common-list common-list-index">
    <view class="item" wx:for="{{ list }}" wx:key="id" data-id="{{item.id}}" data-item="{{item}}" catchtap="toDetail">
      <view class="title">客户:{{ item.customerNm }} <text class="fr">客户类型:{{ item.customerTypeName }}</text>
      </view>
      <view><text>客户编号:{{item.customerCd}}</text><text> 提报人:{{ item.createBy }}</text></view>
      <view><text>客户联系人:{{ item.linkman||"" }}</text><text>联系电话:{{ item.tel||"" }}</text> </view>
      <view> <text>公司地址:{{ item.companyAdd||"" }}</text></view>
      <view class="clearfix">
        <view class="btn-record btn-update fr" wx:if="{{!isSelect}}" data-id="{{item.id}}" catchtap="updateCustomer">修改
        </view>
        <view class="btn-del fr" wx:if="{{!isSelect}}" data-id="{{item.id}}" catchtap="delCustomer">删除</view>
      </view>
    </view>
  </view>

 

 

3.js中:

 

// util里封装好了请求的方法,api是请求地址
var util = require('../../utils/util.js');
var api = require('../../config/api.js');

Page({

    /**
     * 页面的初始数据
     */
    data: {
        queryParams: {
            customerNm: "",
            customerType: "",
            trade: '', // 行业
            pageNum: 1,
            pageSize: 5,
        },
        
        hasMoreData: true,
        contentlistTem: [], // 滑动之前的数组
        list: [], // 滑动累加之后的数组

    },

    getList(queryParams) {
        var that = this;
     // util里封装好了请求的方法,api是请求地址
        util.requestGet(api.CustomerList, queryParams, 'GET').then(function (res) {
            var contentlistTem = []
            if (res.code == 200) {
                if (that.data.queryParams.pageNum == 1) {
                    contentlistTem = []
                } else {
                    contentlistTem = that.data.contentlistTem
                }
                var list = res.rows; // 服务器回包信息
                if (list.length < that.data.queryParams.pageSize) {
                    that.setData({
                        list: contentlistTem.concat(list),
                        hasMoreData: false,
                        contentlistTem: (that.data.queryParams.pageNum == 1) ? list : contentlistTem.concat(list)
                    })
                } else {
                    that.setData({
                        list: contentlistTem.concat(list),
                        hasMoreData: true,
                        ['queryParams.pageNum']: that.data.queryParams.pageNum + 1,
                        contentlistTem: (that.data.queryParams.pageNum == 1) ? list : contentlistTem.concat(list)
                    })
                }
            } else {
                wx.showToast({
                    title: '出现异常'
                })
            }

        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;
        that.getList(this.data.queryParams);
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.data.queryParams.pageNum = 1
        this.getList(this.data.queryParams);
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.data.hasMoreData) {
            this.getList(this.data.queryParams);
        } else {
            wx.showToast({
                title: '已经到底了...',
                icon: 'none'
            })
        }
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

 

posted @ 2022-01-13 14:38  骑蝴蝶飞  阅读(325)  评论(0编辑  收藏  举报