1:在项目的根目录打开page.json,找到对应的页面,在下面添加

 {
      "path": "goods_list/goods_list",
      "style": {
        "navigationBarTitleText": "商品列表",
         
        //开启下拉刷新
        "enablePullDownRefresh": true,
        //当前窗口的背景颜色
        "backgroundColor": "#F8F8F8",
        "onReachBottomDistance": 150
      }
    },

2:在对应页面监听enablePullDownRefresh事件,与methods平级监听onPullDownRefresh

    //下拉刷新
    onPullDownRefresh(){
      //重置关键数据

      //重置页码值
      this.queryObj.pagenum = 1
      //重置总数
      this.total = 0
      //重置节流阀
      this.isloading = false
      //重置商品列表信息
      this.goodsList = []
      
      //重新发起请求:请求发送成功以后传入一个回调函数,回调函数停止下拉刷新
      this.getGoodsList(() => uni.stopPullDownRefresh())
    }

3:改造getGoodsList 函数,接收回调函数

    methods: {
      async getGoodsList(cb) {
        //开启节流阀
        this.isLoading = true      
        const {data: res} = await uni.$http.get('******', this.queryObj)
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        console.log(res)
        //请求完成,关闭节流阀
        this.isLoading = false
        // 只要数据请求完毕,就立即按需调用 cb 回调函数
        cb && cb()
        
        // 为数据赋值
        //上拉加載更多,,定义一个新数组,将旧数组展开,再将旧数组展开
        this.goodsList = [...this.goodsList , ...res.message.goods] 
        this.total = res.message.total      
       
      }
    },

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐