当前位置：首页 > news >正文

uniapp滑动页面切换和下拉刷新，触底加载更多（swiper + scroll-view）

news 2025/7/21 1:45:30

因为官方文档乱七八糟的，所以自己来总结下

需求：

常见的上方tag标签切换，下方是页面，上面点击切换，下面页面也切换，下方列表有下拉刷新，触底加载更多
因为这两个组件都是固定高度的，所以没办法用页面的触底，
因为有的页面不是列表，所以没办法用uniapp的下拉页面刷新生命周期
所以用uniapp的swiper轮播图来切换，轮播图固定高度，里面列表用 scroll-view来做下拉刷新和触底加载更多

效果图
效果图2

代码：

开头有用到uviewUI框架的u-navbar头部，不需要的可以自己删了

<template><view class="pastureWater"><u-navbar title="牧场用水管理" bgColor="#4f9a47" :placeholder="true" /><view class="tagList"><view class="item" v-for="(item, index) in tagList" :key="index" :class="{active: tagActive === index}"@click="tagActive = index"><text>{{item}}</text></view></view><view class="swiperBox"><swiper class="swiper" :current="tagActive" @change="swiperChange"><swiper-item class="swiperItem"><view class="search"><view class="formItem"><text>监管类型：</text><text>生活区</text></view><view class="formItem"><text>牛舍：</text><text>1-1区</text></view></view><div class="listBox"><scroll-view class="list" scroll-y="true" :lower-threshold="0" :throttle="false":refresher-enabled="true" :refresher-triggered="triggered" refresher-background="#f8f4f3"@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"><view class="item" v-for="(item, index) in 2" :key="index"><view class="itemList"><view class="cell"><text>设备编号：232436020043</text></view><view class="cell"><text>设备名称：1号牛舍电表</text></view><view class="cell"><text>当前总电能：8320.4</text></view><view class="cell"><text>时间：2024-01-09 12:12:12</text></view><view class="cell"><text>在线状态：在线</text></view></view></view></scroll-view></div></swiper-item><swiper-item class="swiperItem"><view>数据分析</view></swiper-item><swiper-item class="swiperItem"><view>历史数据</view></swiper-item></swiper></view></view>
</template><script>export default {data() {return {tagList: ['用水设备', '数据分析', '历史数据'],tagActive: 0,triggered: false,deviceList: [],historicalDataList: [],}},onLoad() {},methods: {scroll(item) {console.log(item);},swiperChange(info) {this.tagActive = info.target.current},// 触底加载更多scrolltolower() {console.log('触底加载更多');},// 下拉刷新refresherrefresh() {console.log('下拉刷新');this.triggered = true;setTimeout(() => {this.triggered = false;}, 3000)},}}
</script><style lang="scss" scoped>.pastureWater {height: 100vh;display: flex;flex-direction: column;background-color: #f8f4f3;/deep/ uni-text.u-icon__icon.uicon-arrow-left {color: #fff !important;}/deep/ .u-line-1.u-navbar__content__title {color: #fff;}.tagList {display: flex;height: 80rpx;background-color: #fff;margin-bottom: 16rpx;.item {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;border-bottom: 4rpx solid transparent;&.active {color: #9dbc67;border-bottom: 4rpx solid #9dbc67;}}}.swiperBox {flex: 1;display: flex;flex-direction: column;.swiper {height: 100%;.swiperItem {height: 100%;display: flex;flex-direction: column;padding: 0 20rpx;.search {display: flex;.formItem {height: 76rpx;width: 50%;display: flex;align-items: center;padding: 0 20rpx;text {display: flex;align-items: center;justify-content: center;padding: 0 10rpx;height: 60rpx;line-height: 1.05;font-size: 28rpx;&:last-child {flex: 1;background-color: #fff;border-radius: 5rpx;}}}}.listBox {height: calc(100% - 76rpx);.list {height: 100%;.item {margin-bottom: 16rpx;border-radius: 10rpx;padding: 20rpx 20rpx 10rpx;background-color: #fff;&:last-child {margin-bottom: 0;}.itemList {display: flex;flex-wrap: wrap;.cell {width: 50%;font-size: 24rpx;color: #000;margin-bottom: 10rpx;}}}}}}}}}
</style>