uniapp上拉加载和下拉刷新

最新推荐文章于 2024-09-15 00:41:42 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-09-15 00:41:42 发布

阅读量352

点赞数 1

分类专栏： uniapp

本文链接：https://blog.csdn.net/Guoyu1_/article/details/110940800

版权

uniapp 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<view class="goods">
       <goodsList :goodsList="goodsList" />
       <view class="isOver" v-show="flag">-------我是有底线的-------</view>
   </view>

import goodsList from '../../components/goods-list/goods-list'
   export default {
       components: {
           goodsList
       },
       data() {
           return {
               goodsList: [],
               pageindex: 1,
               flag: false
           }
       },
       onLoad() {
           this.getHotGoods()
       },
       methods: {

1.上拉加载

           //获取商品列表
           async getHotGoods() {
               const res = await this.$myRequest({
                   url: '/api/getgoods?pageindex=' + this.pageindex
               })
               if (res.data.message.length == 0) return this.flag = true //当传来值长度为0时，返回并显示-------我是有底线的-------
               this.goodsList = [...this.goodsList, ...res.data.message]
           },
       },
       onReachBottom() { //监听页面滚动到底部
           //根据 getHotGoods函数中的 flag，判断返回的数据的length 小于10表示没有后面的数据了
           if (this.flag) {
               return
           }
           this.getHotGoods()
           this.pageindex++
           console.log('商品列表数据：', this.pageindex)
       }

2.下拉刷新

async getHotGoods(callBack) {
               const res = await this.$myRequest({
                   url: '/api/getgoods?pageindex=' + this.pageindex
               })
               if (res.data.message.length == 0) return this.flag = true
               this.goodsList = [...this.goodsList, ...res.data.message]
               callBack && callBack()
           },
  }，

//下拉刷新
       onPullDownRefresh() {
           this.pageindex=1
           this.goodsList=[]
           this.flag = false
           setTimeout(()=>{
               this.getHotGoods(()=>{
                   uni.stopPullDownRefresh()
               })
           },1000)
       }

   }