uniapp顶部滑动选项卡
使用uniapp实现可滑动的选项卡,可用于条件查询订单、记录等信息
可以直接用的
模板内容
<template>
<view class="container">
<!-- 顶部选项卡 -->
<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation :scroll-into-view="scrollInto">
<view class="pagecontrol-top-title">
<view v-for="(item, index) in itemsArr" :key="index" class="pagecontrol-top-text" @click="changeTab(index)" :id="'tab' + index">
<view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">{{ item }}</view>
<view class="pagecontrol-bottom-line" :class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'"></view>
</view>
</view>
</scroll-view>
<!-- 内容 -->
<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
<swiper-item v-for="(item, index) in itemsArr" :key="index">
<scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" style="background-color: #F5F5F5;">
<template v-if="true">
<!-- 列表 -->
<view v-for="(item2, index2) in orderList" :key="index2">
<!-- 列表样式 -->
<view class="order-item">
<view class="order-top-view">
<view class="order-store-name">{{ item2.title }}</view>
<view class="order-status">已预约</view>
</view>
<view class="order-content">
<view class="">
<view class="order-name">名称:{{ item2.name }}</view>
<view class="order-date">日期:{{ item2.createTime }}</view>
</view>
<view class="price">
<text>¥</text>
<text style="font-size: 18px;">77</text>
<text style="font-size: 14px;">.50</text>
</view>
</view>
<!-- 操作按钮 -->
<view class="bottom-buttons">
<view class="button-tag">删除</view>
<view class="button-tag">取消</view>
<view class="button-tag" style="background-color: #0abafa; color: white;">预约</view>
</view>
</view>
</view>
</template>
<!-- 无数据提示 -->
<template v-else>
<fq-empty empty-text="暂无订单"></fq-empty>
</template>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
js
<script>
export default {
data() {
return {
itemsArr: ['代付款', '配送中', '售后/退款', '全部'],
tabIndex: 0,
scrollInto: '',
scrollH: 660,
orderList: [
{
id: 1,
title: '红烧肉',
name: '肉类',
createTime: '2022-02-17'
},
{
id: 2,
title: '红烧肉',
name: '肉类',
createTime: '2022-04-27'
},
{
id: 2,
title: '红烧肉',
name: '肉类',
createTime: '2022-04-27'
},
{
id: 2,
title: '红烧肉',
name: '肉类',
createTime: '2022-04-27'
},
{
id: 2,
title: '红烧肉',
name: '肉类',
createTime: '2022-04-27'
},
{
id: 2,
title: '红烧肉',
name: '肉类',
createTime: '2022-04-27'
},
{
id: 2,
title: '红烧肉',
name: '肉类',
createTime: '2022-04-27'
},
{
id: 2,
title: '红烧肉',
name: '肉类',
createTime: '2022-04-27'
}
]
};
},
methods: {
// 监听滑动
onChangeTab(e) {
this.changeTab(e.detail.current);
},
// 切换选项
changeTab(index) {
console.log(index);
if (this.tabIndex === index) {
return;
}
this.tabIndex = index;
// 滚动到指定元素
this.scrollInto = 'tab' + index;
}
},
onLoad() {
uni.getSystemInfo({
success: res => {
console.log('wuwuFQ:', res);
this.scrollH = res.windowHeight - 40;
// #ifdef MP
this.scrollH -= 44;
// #endif
console.log('wuwuFQ:', this.scrollH);
}
});
}
};
</script>
css
<style>
.pagecontrol-top-scroll {
height: 40px;
width: 100%;
white-space: nowrap;
box-sizing: border-box;
border-bottom-width: 1rpx;
border-bottom-style: solid;
border-bottom-color: #ededed;
}
.pagecontrol-top-title {
height: 100%;
width: 100%;
display: flex;
justify-content: space-around;
}
.pagecontrol-top-text {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.pagecontrol-top-normal {
color: black;
font-size: 16px;
}
.pagecontrol-top-selected {
color: #0abafa;
font-size: 17px;
}
.pagecontrol-bottom-line {
width: 100%;
height: 1px;
margin-top: 2px;
background-color: #0abafa;
}
.pagecontrol-bottom-line-show {
visibility: visible;
}
.pagecontrol-bottom-line-visibility {
visibility: hidden;
}
.order-item {
background-color: #ffffff;
padding: 20rpx;
border-radius: 15rpx;
margin: 15rpx;
}
.order-top-view {
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
}
.order-store-name {
font-size: 16px;
font-weight: 500;
}
.order-status {
font-size: 12px;
color: #a5a5a5;
}
.order-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.order-date {
margin: 6rpx 0;
}
.bottom-buttons {
margin-top: 10rpx;
display: flex;
justify-content: flex-end;
align-items: center;
}
.button-tag {
margin-left: 40rpx;
height: 30px;
line-height: 30px;
padding: 0 20px;
border-radius: 15px;
color: #a5a5a5;
border: 1px solid #ededed;
}
</style>