因为官方文档乱七八糟的,所以自己来总结下
需求:
常见的上方tag标签切换,下方是页面,上面点击切换,下面页面也切换,下方列表有下拉刷新,触底加载更多
因为这两个组件都是固定高度的,所以没办法用页面的触底,
因为有的页面不是列表,所以没办法用uniapp的下拉页面刷新生命周期
所以用uniapp的swiper轮播图来切换,轮播图固定高度,里面列表用 scroll-view来做下拉刷新和触底加载更多
代码:
开头有用到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>