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

admin2024-08-23  6

背景:

效果展示:

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

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

一、单个页面的配置

官方链接:点击跳转官网

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

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

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

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

 上滑触底加载:

核心代码:

	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>

 备注说明:

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

官网链接:点击跳转官网

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

uniapp实现区域滚动、下拉刷新、上滑滚动加载更多,第4张 uniapp实现区域滚动、下拉刷新、上滑滚动加载更多,第5张

核心代码:

<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>

备注:

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

三、第2种的优化

背景:

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

效果展示:

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

代码:

<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>

CSS布局中最小高度的妙用——最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!