​ #私藏项目实操分享# uniapp 上拉加载，下拉刷新

上拉加载，下拉刷新

onload 监听页面加载生命周期

onReachBottom 监听触底动作生命周期

使用scroll-view并且动态高度为页面的所见高度，会导致view标签触不到底，onReachBottom的事件不能触发

使用scroll-view的事件bindscrolltolower  简写@scrolltolower="funBottom"，把onReachBottom的函数体写在@scrolltolower的函数里或直接调用数据加载函数

json文件页面中配置 ​enablePullDownRefresh为true，开启对应页面的下拉刷新设置

onPullDownRefresh监听用户下拉动作

​

调用API

wx.showNavigationBarLoading() 在导航条进行显示加载动画

wx.hideNavigationBarLoading() 隐藏导航条加载动画

wx.stopPullDownRefresh() 停止下拉刷新

​

页码1.2.3  当前在第1页(currentPage)  页数共3页(total)  每页个数(size) 比如每页放10个数据

#私藏项目实操分享#

<template>
<view>
    <scroll-view scroll-y="true" :scroll-y="getStoreListLength" @scrolltolower="getStoreList" :style="'height: ' + svHeight + 'px;'" class="store"></scroll-view>
        <view class="item" v-for="(item,index) in storeList" :key="index">
            <text class="storeAddress">{{item.storeAddress}}</text>
        </view>
    </scroll-view>
          <no-records v-if="storeList.length === 0" :pic="getImage.noOrder"
                  desc="暂无记录"></no-records>

</view>
</template>
    
    
<script>
    import noRecords from '../../common/components/noRecords/noRecords.vue';
    export default {
        components: {noRecords,}
        data() {
            return {
                svHeight: 0,
                storeList: [],//商品详情
                pageNumber: 1,
                total: 0,
                pageSize: 10,
            }
        },
         onReady() {
        let that = this;

        // #ifdef H5 || APP-PLUS || MP-ALIPAY
        uni.getSystemInfo({
          success: function (res) {
            const query = uni.createSelectorQuery().in(that)
            query.select('.store')
                    .boundingClientRect(data => {
                      that.svHeight = (res.windowHeight - data.top);
                    })
                    .exec();
          }
        });
        // #endif

        // h5 app mp-alipay不支持微信的方法
        // #ifndef H5 || APP-PLUS || MP-ALIPAY
        // 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
        uni.getSystemInfo({
          success: function (res) {
            console.log("res==", res);
            uni.createSelectorQuery().select(".store")
                    .boundingClientRect(function (data) {
                      that.svHeight = (res.windowHeight - data.top);
                      console.log("data==", data)
                    }).exec();
          }
        });
        // #endif
      },
      onLoad() {
        this.getStoreList();
      },
      //下拉加载
      onPullDownRefresh() {
        console.log("下拉刷新(●ˇ∀ˇ●)")
        this.pageNumber = 1;
        this.total = 0;
        this.isLoading = false;
        this.storeList = [];
        this.getStoreList();
        //uni.showNavigationBarLoading;//在导航条进行显示加载动画
        //uni.stopPullDownRefresh({});//停止下拉刷新
        //uni.hideNavigationBarLoading({});//隐藏导航条加载动画
      },
      //触底
      onReachBottom() {
        console.log("我到底了(●'◡'●)");

        if (this.pageNumber * this.pageSize >= this.total) {
          uni.showMsg('数据加载完毕');
        }
        if (this.isLoading) {
          return;
        }

        this.pageNumber += 1;
        this.getStoreList();
      },
      methods: {
        //获取商品列表
        getStoreList: function () {
          this.isLoading = true;//打开节流阀
          let data = {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            sortName: 'createTime',
            sortOrder: 'desc',
            currentLatitude: uni.getStorageSync('latitude'),
            currentLongitude:uni.getStorageSync('longitude')
          };
          this.$Request.get('storeApi', data).then(res => {
            console.log("res===", res);
            if (res.data.code === 1) {
              this.storeList = res.data.data.rows;
              this.total = res.data.data.total;

              this.pageNumber += 1;
            }

            this.isLoading = false;//关闭节流阀
            uni.hideNavigationBarLoading({});//隐藏导航条加载动画
            uni.stopPullDownRefresh({});//停止下拉刷新

            data && this.ah();

          }, err => {
            console.log("err: ", JSON.stringify(err));
          })
        },
      }
    }

</script>