• 微信小程序中的加载更多(即列表分页)


    1.app.json中:

    "window": {

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

    }

    2.wxml中:

    <view class="info" wx:for="{{contentlist}}" wx:key="key">
    <input hidden="{{hidden}}" value="{{item.id}}"/>
    <text>{{item.title}}</text>
    <text class="time">{{item.inputtime}}</text>
    <view>
    <text>{{item.content}}</text>
    </view>
    </view>

    3.js中:

    data: {
        hidden: true,                          //隐藏表单控件
            page: 1,                              //当前请求数据是第几页
            pageSize: 10,                          //每页数据条数
            hasMoreData: true,                      //上拉时是否继续请求数据,即是否还有更多数据
            contentlist: [],                        //获取的数据列表,以追加的形式添加进去
    },
    // 获取分页列表
    getInfo: function (message) {
        var that = this;
        wx.showNavigationBarLoading()              //在当前页面显示导航条加载动画
        wx.showLoading({                        //显示 loading 提示框
            title: message,
        })
        wx.request({
            url: 'http://localhost:88/wechat/test.php',    //本地设置不校验合法域名
            data: { page: that.data.page, count: that.data.pageSize },
            method: 'post',
            header: { 'content-type': 'application/x-www-form-urlencoded' },
            success: function (res) {
                var contentlistTem = that.data.contentlist;
                if (res.data.length > 0) {
                    wx.hideNavigationBarLoading()     //在当前页面隐藏导航条加载动画
                    wx.hideLoading()               //隐藏 loading 提示框
                    if (that.data.page == 1) {
                        contentlistTem = []
                    }
                    var contentlist = res.data;
                    if (contentlist.length < that.data.pageSize) {
                        that.setData({
                            contentlist: contentlistTem.concat(contentlist),
                            hasMoreData: false
                        })
                    } else {
                        that.setData({
                            contentlist: contentlistTem.concat(contentlist),
                            hasMoreData: true,
                            page: that.data.page + 1
                        })
                    }
                }
            },
            fail: function (res) {
                wx.hideNavigationBarLoading()
                wx.hideLoading()
                fail()
            },
            complete: function (res) {
    
            },
        })
    },
    
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        var that = this
        that.getInfo('正在加载数据...')
    },
    
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.data.page = 1
        this.getInfo('正在刷新数据')
    },
    
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.data.hasMoreData) {
            this.getInfo('加载更多数据')
        } else {
            wx.showToast({
                title: '没有更多数据',
            })
        }
    },

    原文链接:https://blog.csdn.net/qq_38882327/article/details/92627805(感谢分享)
  • 相关阅读:
    python使用urllib2抓取防爬取链接
    Python 标准库 urllib2 的使用细节
    源代码阅读利器:Source Navigator — LinuxTOY
    python程序使用setup打包安装 | the5fire的技术博客
    mctop: 监视 Memcache 流量 — LinuxTOY
    nload: 监视网络流量及带宽占用
    Learn Linux The Hard Way — LinuxTOY
    使用virtualenv创建虚拟python环境 | the5fire的技术博客
    autocompleteredis 基于redis的自动补全 开源中国
    atool home
  • 原文地址:https://www.cnblogs.com/luqiang213917/p/11941729.html
Copyright © 2020-2023  润新知