• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序触底加载和下拉刷新

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 准备:

//js页面   
    data: {
        datalist:[],    //接收数据
        page:1,        //作为参数
        isBool:true    //用于判断是触底加载还是下来刷新
    },
    //请求 已简单封装过
    async requestList(){
        const url="url"
        let data={
            page:this.data.page,    //第几页
            limit:10                //每次请求的数据量 一次10条
        }
        let res=await api.get(url,data)   //返回的数据
        this.setData({
            //isBool如果是true,则为触底加载,会将datalist中的数据和重新请求的数据合并
            //isBool如果是false,则为刷新,给datalist重新赋值
            datalist:this.data.isBool ? [...this.data.datalist,...res.data] : res.data
        })
    }

开始写触底加载(上拉):

//js页面
    onReachBottom: function () {
        console.log("上拉,就是触底加载");
        this.setData({
            page:this.data.page + 1,    //每次触发事件,就让page+1
            isBottom:true                //让isBool为真,代表上拉
        })
        this.requestList()    //最后重新刷新请求
    },

下拉(刷新):

onPullDownRefresh():需要在app.jsonwindow选项中或页面配置中开启enablePullDownRefresh

app.json:
    "window": {
        "backgroundTextStyle": "light",    //下拉 loading 的样式,默认为dark,
        "enablePullDownRefresh":true    //启用下拉刷新
     },
//js页面:
    onPullDownRefresh: function () {
        console.log('监听用户下拉,刷新');
        this.setData({
            page:this.data.page + 1,
            isBool:false        //用false代表刷新
        })
        this.requestList()    //重新请求
    },
  • 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
  • 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

--原创,转载请说明哦!欢迎交流!( •̀ ω •́ )✧


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序坑集发布时间:2022-07-18
下一篇:
微信小程序封装http请求发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap