聊城网站建设公司电话,wordpress怎么重新配置文件,五和网站建设,太平洋网站开发因为官方文档乱七八糟的#xff0c;所以自己来总结下 需求#xff1a; 常见的上方tag标签切换#xff0c;下方是页面#xff0c;上面点击切换#xff0c;下面页面也切换#xff0c;下方列表有下拉刷新#xff0c;触底加载更多 因为这两个组件都是固定高度的#xff0c;… 因为官方文档乱七八糟的所以自己来总结下 需求 常见的上方tag标签切换下方是页面上面点击切换下面页面也切换下方列表有下拉刷新触底加载更多 因为这两个组件都是固定高度的所以没办法用页面的触底 因为有的页面不是列表所以没办法用uniapp的下拉页面刷新生命周期 所以用uniapp的swiper轮播图来切换轮播图固定高度里面列表用 scroll-view来做下拉刷新和触底加载更多 代码 开头有用到uviewUI框架的u-navbar头部不需要的可以自己删了 templateview classpastureWateru-navbar title牧场用水管理 bgColor#4f9a47 :placeholdertrue /view classtagListview classitem v-for(item, index) in tagList :keyindex :class{active: tagActive index}clicktagActive indextext{{item}}/text/view/viewview classswiperBoxswiper classswiper :currenttagActive changeswiperChangeswiper-item classswiperItemview classsearchview classformItemtext监管类型/texttext生活区/text/viewview classformItemtext牛舍/texttext1-1区/text/view/viewdiv classlistBoxscroll-view classlist scroll-ytrue :lower-threshold0 :throttlefalse:refresher-enabledtrue :refresher-triggeredtriggered refresher-background#f8f4f3refresherrefreshrefresherrefresh scrolltolowerscrolltolowerview classitem v-for(item, index) in 2 :keyindexview classitemListview classcelltext设备编号232436020043/text/viewview classcelltext设备名称1号牛舍电表/text/viewview classcelltext当前总电能8320.4/text/viewview classcelltext时间2024-01-09 12:12:12/text/viewview classcelltext在线状态在线/text/view/view/view/scroll-view/div/swiper-itemswiper-item classswiperItemview数据分析/view/swiper-itemswiper-item classswiperItemview历史数据/view/swiper-item/swiper/view/view
/templatescriptexport 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)},}}
/scriptstyle langscss 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
