直播商城原始碼，產品之間來回切換，選項卡之間的位移

直播商城原始碼，產品之間來回切換，選項卡之間的位移實現的相關程式碼

建立子元件vue檔案tab-slide(選項卡部分):

html部分

①利用uniapp元件scroll-view橫向滑動

<scroll-view class="uni-swiper-tab" scroll-x>
</scroll-view>

②遍歷選項卡標題,用block標籤(無樣式意義,只用於列表渲染)

scrollStyle:父級樣式設定

關於template和block的用法

<block v-for="(tab,index) in tabs" :key="tab.id" :style="scrollStyle">
</block>

③tab選項(name和下劃線)

<view class="swiper-tab-list">
{{tab.name}}
<view class="swiper-tab-line"></view>
</view>

④為tab選項新增屬性

<-- 繫結tab選項樣式 -->
:style="scrollItemStyle"
<-- 繫結tab選項被選擇後的樣式 -->
:class="{'active':tabIndex==index}"
<-- 繫結tab選項的點選事件 -->
@tap="tabtap(index)"

整合程式碼:

<template>
<view class="uni-tab-bar">
<scroll-view class="uni-swiper-tab" scroll-x>
<block v-for="(tab,index) in tabBars" :key="tab.id">
<view
class="swiper-tab-list"
:class="{'active' : tabIndex == index}"
@tap="tabtap(index)"
>
{{tab.name}}
<view class="swiper-tab-line"></view>
</view>
</block>
</scroll-view>
</view>
</template>

script部分

①通過props接受父元件傳遞過來的資料

props:{
tabs:Array,
tabIndex:Number,
}

補充知識點:父元件傳值給子元件用props;子元件傳值給父元件用$emit

②編寫點選事件:(向父元件提交一個事件和值)

在這裡提交的事件在父元件中以@tabtap="tabtap"關聯父元件

tabtap(index){
this.$emit('tabtap',index)
}

整合程式碼:

<script>
export default {
name:"tab-slide",
props: {
tabBars:Array,
tabIndex:Number,
},
methods:{
// 點選切換導航
tabtap(index){
this.$emit('tabtap',index)
}
}
}
</script>

css部分

①給橫向滾動加一條下邊框:

.uni-swiper-tab{
border-bottom:1upx solid #EEEEEE;
}

②設定active時的字型顏色:

.active{
color: #343434;
}

③設定active和line樣式

.active .swiper-tab-line{
border-bottom:6upx solid #5598E7;
width: 70upx;
margin: auto;
border-top: 6upx solid #5598E7;
border-radius: 20upx;
}

整合程式碼:

<style scoped>
.uni-swiper-tab{
border-bottom: 1upx solid #EEEEEE;
}
.active{
color: #343434;
}
.active .swiper-tab-line{
border-bottom: 6upx solid #5598E7;
width: 70upx;
margin: auto;
border-top: 6upx solid #5598E7;
border-radius: 20upx;
}
</style>

以上就是 直播商城原始碼，產品之間來回切換，選項卡之間的位移實現的相關程式碼，更多內容歡迎關注之後的文章