uniapp实现区域滚动、下拉刷新、上滑滚动加载更多

影子信息

已于 2024-08-22 11:55:34 修改

阅读量520

点赞数 7

分类专栏： uniapp 文章标签： uni-app

于 2024-08-22 11:53:20 首次发布

本文链接：https://blog.csdn.net/weixin_45024453/article/details/141422241

版权

uniapp 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

背景：

在uniapp框架中，有两种实现办法。第1种，是首先在page.json中配置页面，然后使用页面的生命周期函数；第2种，使用<scroll-view>组件，然后配置组件的相关参数，包括但不限于：滚动区域、触底加载。。。这里注意要给scroll-view设置一个height不然滚动不了

效果展示：

根据开发实际情况，我推荐第2种、第3种解决办法。

一、单个页面的配置

官方链接：点击跳转官网

第一步，是在pages.json配置开启下拉刷新

{
            "path": "pages/PMS/document/officialDocument",
            "style": {
                "navigationStyle": "custom",
                "enablePullDownRefresh": false, //配置后，可以下拉刷新，上拉加载`
                "onReachBottomDistance": 100
            }
        },

就已经成功开启下拉刷新，与触底加载了，当然还需要相对应的事件去触发。接下来就介绍一下所需要的事件函数。

onReachBottom() （上拉时到底部多少距离触发的事件）官方语言：页面滚动到底部的事件。可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

uni.startPullDownRefresh() （直接调用一次下拉事件）官方语言：开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

onPullDownRefresh() （下拉后触发的事件）官方语言：处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

上滑触底加载：

核心代码：

	onLoad() {
			
	},
    onReachBottom(){
    //上拉到底时触发，onReachBottom函数跟生命周期同级
		let  allTotal = this.formData.page * this.formData.pageSize
		    if(allTotal < this.total){
		        this.page ++;//当前条数小于总条数 则增加请求页数
				this.getData() //调用加载数据方法
		    }else{
		        console.log('已加载全部数据')
		    }
	},
    onPullDownRefresh(){
    //下拉刷新触发，onPullDownRefresh函数跟生命周期同级
        this.list = []
        this.getData()//调用获取数据方法
        setTimeout(() => {
            //结束下拉刷新
          uni.stopPullDownRefresh ();
        }, 1000);
    },

加载动态效果：

使用组件：

<uni-load-more :status="status"></uni-load-more>
<script>
export default {
    data(){
        status: 'more',
        page:'1',
        pageSize:'10'
    },
    onLoad() {
			
	},
 	onReachBottom() {
			let allTotal = this.page * this.pageSize;
			if (allTotal < this.total) {
				this.status = 'loading';  //加载中状态
				this.page++;
                this.getData()
			} else {
				this.status = 'noMore'; //加载完状态
			}
		},
    }
</script>

备注说明：

因为通过验证console.log()，按照设计图来写，滚动区域不一样。不会出发onReachBottom()。推荐第2种解决方式。。。

二、scroll-view组件的滚动区域、触底加载

官网链接：点击跳转官网

@refresherpulling //下拉刷新控件被下拉

@refresherrefresh //下拉刷新被触发

@refresherrestore //下拉刷新被复位

@scrolltoupper //滚动到顶部/左边，会触发 scrolltoupper 事件

@scrolltolower //滚动到底部/右边，会触发 scrolltolower 事件

核心代码：

<template>
<scroll-view
            class="dialogue-box"
            style="height: 86vh"
            :scroll-y="true"
            :refresher-threshold="10"
            :scroll-top="scrollTop"
            @scrolltolower="handelLower"
            :refresher-enabled="isLoadingTop"
            :refresher-triggered="isTriggeredTop"
            @refresherrefresh="handleRefresher"
            @refresherrestore="handelonRestore"
          >
</scroll-view>
</template>

<script>
export default {
data() {
    return {
      tableList: [],
      lazyLoad: true,
      shipGuid: "",
      scrollTop: "50px",
      loadings: "more", //more/loading/noMore
      isLoadingTop: true,
      isTriggeredTop: true,
      isShowBtm: false,
};
},
method:{
    getTableList(info, load) {
      //发起网络请求
      getFiles(info).then((res) => {
        if (res.data.code == 0) {
          const resData = res.data.data;
          if (load) {
            this.tableList = this.tableList.concat(resData);
            if (resData && resData.length == 0) {
              // console.log("没有更多了");
              uni.hideLoading();
              this.loadings = "noMore";
            } else {
              uni.hideLoading();
              this.loadings = "more";
            }
            return resData;
          } else {
            this.tableList = resData;
            this.noNum = !this.tableList.length;
          }
        }
      });
    },
    handelLower() {
      console.log("滚动到底部>>>");
      this.isShowBtm = true;
      if (this.loadings == "loading") return;
      if (!this.loadings == "noMore") return;
      this.loadings = "loading";
      this.pages.page += 1;
      let info = {
        ...this.pages,
        shipGuid: this.shipGuid,
      };
      this.getTableList(info, true);
    },
    handleRefresher() {
      console.log("顶部下拉刷新s>>>", this.isLoadingTop, this.isTriggeredTop);
      this.isLoadingTop = true;
      this.isTriggeredTop = true;
      if (!this.isLoadingTop) return;
      let info = {
        ...this.pages,
        shipGuid: "",
      };
      this.$store.commit("setShipGuids", "");
      this.getTableList(info);
      this.isLoadingTop = false;
      this.isTriggeredTop = false;
    },
    handelonRestore() {
      console.log("handelonRestore>>>");
      this.isLoadingTop = true;
    },
},
</script>

备注：

scroll-view组件要设置一个height。一般是设置为(某某vh)

三、第2种的优化

背景：

第2种已经能够实现下拉刷新和触底加载。但是我们只想要触底加载，并且想让scroll-view组件的高度是自适应的，不再设置滚动区域的高度scrollHeight

注意：关于高度，通过设置css样式解决，通过给最外层的盒子，设置min-height:0;

这次使用uniapp+uView组件实现：

效果展示：

代码：

<template>
    <view class="regionalregulation_contanier">
        <!-- <TopNavibarVue :listData="listData" :currentTabIndex="currentTabIndex" @clickTabs="clickTabs"></TopNavibarVue> -->
        <template v-for="item in listData">
            <view class="regionalregulation_content" v-if="currentTabIndex == item.id" :key="item.id">
                <!-- <u-sticky bgColor="#fff">
                    <view style="padding: 20rpx 20rpx 0rpx 20rpx;">
                        <FormItem :formItems="formItems" @searchData="searchData"></FormItem>
                    </view>
                </u-sticky> -->
                <view class="content_list" v-if="tableData.length">
                    <scroll-view :scroll-y="true" @scrolltolower="handelLower">
                        <view v-for="i in tableData" :key="i.pid">
                            <CardTopBTNVue :data="i" :detail="{ title: item.subName }"></CardTopBTNVue>
                        </view>
                        <u-loadmore :status="loadings" v-if="isShowBtm" />
                    </scroll-view>
                </view>
                <view class="content_list" v-else>
                    <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无匹配信息">
                    </u-empty>
                </view>
            </view>
        </template>
    </view>
</template>
<script>
export default {
data() {
        return {
            pages: {
                pageNum: 1,
                pageSize: 7,
            },
            tableData: [],
            scrollTop: "50px",
            loadings: "loadmore", //loadmore/loading/nomore
            isShowBtm: false,
}
methods: {
    async getTableList(params, id, _isLower) {
            const {
                data: res
            } = await this.listData[id].apiPost(params)
            if (res.code == 0) {
                const resData = res.data
                if (_isLower) {
                    this.tableData = [...this.tableData, ...resData]
                } else {
                    this.tableData = resData
                }
                this.loadings = resData.length < params.pageSize ? "nomore" : "loadmore";
            } else {
                this.tableData = []
            }
            // this.isShowBtm = false;
            setTimeout(function () {
                uni.hideLoading();
            }, 500);
        },
        handelLower() {
            this.isShowBtm = true;
            if (this.loadings == "loading") return;
            if (this.loadings == "nomore") return;
            this.loadings = "loading";
            this.pages.pageNum += 1;
            this.getTableList(this.pages, this.currentTabIndex, true);
        },
}
</script>

<style lang="scss" scoped>
.regionalregulation_contanier {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .regionalregulation_content {
        min-height: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .content_list {
            min-height: 0;
            flex: 1;
            overflow-y: auto;
            padding: 0rpx 20rpx;
            margin-top: 10rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            box-sizing: border-box;

            uni-scroll-view {
                height: 100%;
            }
        }
    }
}
</style>