前端vue可以左右滾動(dòng)的切換的tabs tabs選項(xiàng)卡 滑動(dòng)動(dòng)畫效果 自動(dòng)寬度,?閱讀全文下載完整代碼請(qǐng)關(guān)注微信公眾號(hào)： 前端組件開發(fā)
效果圖如下:
?
#### 使用方法
```使用方法
swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //導(dǎo)航列表
swiperTabIdx: 0,
swiperColor: '#161616', //導(dǎo)航欄字體未選中前顏色
swiperCurrentColor: '#1D63FF', //選中當(dāng)前導(dǎo)航欄字體顏色
curSwiperWidth: '26%', //當(dāng)前導(dǎo)航的寬度 % upx rpx px? （導(dǎo)航超出可左右滑動(dòng) ）
curSwiperHeight: 96, //當(dāng)前導(dǎo)航的高度度 rpx px
curSwiperLineShow: true, //是否顯示導(dǎo)航欄的線條 （線條距離標(biāo)題太近的話可自行修改.swiperLine的css）
curSwiperLineActiveBg: '#1D63FF', //當(dāng)前選中的導(dǎo)航欄線條顏色
curSwiperLineActiveWidth: '60%', //當(dāng)前選中的導(dǎo)航欄線條的寬度 upx rpx px
curSwiperLineActiveHeight: '2px', //當(dāng)前選中的導(dǎo)航欄線條的高度度 upx rpx px
<!--組件-->
<ccSwiperTabs :swiperTabList='swiperTabList' :swiperTabIdx='swiperTabIdx'
:curSwiperWidth='curSwiperWidth' :curSwiperHeight='curSwiperHeight' :swiperColor='swiperColor'
:swiperCurrentColor='swiperCurrentColor' :curSwiperLineShow="curSwiperLineShow"
:curSwiperLineActiveWidth="curSwiperLineActiveWidth" :curSwiperLineActiveHeight="curSwiperLineActiveHeight"
:curSwiperLineActiveBg="curSwiperLineActiveBg"
@change="CurrentTab">
</ccSwiperTabs>
```文章來源地址http://www.zghlxwxcb.cn/news/detail-480100.html
#### HTML代碼部分
```html
<template>
<view class="content">
<!--組件-->
<ccSwiperTabs :swiperTabList='swiperTabList' :swiperTabIdx='swiperTabIdx'
:curSwiperWidth='curSwiperWidth' :curSwiperHeight='curSwiperHeight' :swiperColor='swiperColor'
:swiperCurrentColor='swiperCurrentColor' :curSwiperLineShow="curSwiperLineShow"
:curSwiperLineActiveWidth="curSwiperLineActiveWidth" :curSwiperLineActiveHeight="curSwiperLineActiveHeight"
:curSwiperLineActiveBg="curSwiperLineActiveBg"
@change="CurrentTab">
</ccSwiperTabs>
<!-- radioData:單選數(shù)據(jù) curIndex：當(dāng)前選擇序列 @change：?jiǎn)芜x事件 -->
<ccRadioView :radioData="items" :curIndex="current" @change="radioChange"></ccRadioView>
<button class="submitBtn" type="primary" @click="submitAppointment">提交預(yù)約</button>
</view>
</template>
```
#### JS代碼 （引入組件 填充數(shù)據(jù)）
```javascript
<script>
import ccSwiperTabs from '../../components/ccSwiperTabs.vue'
import ccRadioView from '../../components/ccRadioView.vue'
export default {
components: {
ccSwiperTabs,
ccRadioView
},
data() {
return {
swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //導(dǎo)航列表
swiperTabIdx: 0,
swiperColor: '#161616', //導(dǎo)航欄字體未選中前顏色
swiperCurrentColor: '#1D63FF', //選中當(dāng)前導(dǎo)航欄字體顏色
curSwiperWidth: '26%', //當(dāng)前導(dǎo)航的寬度 % upx rpx px? （導(dǎo)航超出可左右滑動(dòng) ）
curSwiperHeight: 96, //當(dāng)前導(dǎo)航的高度度 rpx px
curSwiperLineShow: true, //是否顯示導(dǎo)航欄的線條 （線條距離標(biāo)題太近的話可自行修改.swiperLine的css）
curSwiperLineActiveBg: '#1D63FF', //當(dāng)前選中的導(dǎo)航欄線條顏色
curSwiperLineActiveWidth: '60%', //當(dāng)前選中的導(dǎo)航欄線條的寬度 upx rpx px
curSwiperLineActiveHeight: '2px', //當(dāng)前選中的導(dǎo)航欄線條的高度度 upx rpx px
items: [{
value: '1',
name: '上午9:00-10:00'
},
{
value: '2',
name: '上午10:00-11:00',
checked: ''
},
{
value: '3',
name: '上午11:00-12:00',
},
{
value: '4',
name: '下午13:00-14:00',
},
{
value: '5',
name: '下午14:00-15:00',
},
{
value: '6',
name: '下午15:00-16:00',
},
{
value: '7',
name: '下午16:00-17:00',
},
{
value: '8',
name: '下午17:00-18:00',
},
],
current: 0,
}
},
onLoad() {
},
methods: {
submitAppointment(){
uni.showModal({
title:'預(yù)約數(shù)據(jù)',
content:"日期選擇 = " + this.swiperTabList[this.swiperTabIdx] + "? 時(shí)間段選擇 = " + this.items[this.current].name
})
},
//tab點(diǎn)擊事件 自行完善需要的代碼
CurrentTab: function(index, item) {
this.swiperTabIdx = index;
console.log('日期選擇' + item + '\n序列' + index)
},
radioChange: function(evt) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === evt.target.value) {
this.current = i;
break;
}
}
},
}
}
</script>
```
#### CSS
```css
<style>
.content {
display: flex;
flex-direction: column;
}
.submitBtn {
width: 90%;
margin-top: 86rpx;
}
</style>文章來源：http://www.zghlxwxcb.cn/news/detail-480100.html
```
到了這里，關(guān)于前端vue可以左右滾動(dòng)的切換的tabs tabs選項(xiàng)卡 滑動(dòng)動(dòng)畫效果 自動(dòng)寬度的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
