直播商城源码，产品之间来回切换，选项卡之间的位移

直播商城源码，产品之间来回切换，选项卡之间的位移实现的相关代码

创建子组件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>

 

以上就是 直播商城源码，产品之间来回切换，选项卡之间的位移实现的相关代码，更多内容欢迎关注之后的文章