直播商城源码,产品之间来回切换,选项卡之间的位移
直播商城源码,产品之间来回切换,选项卡之间的位移实现的相关代码
创建子组件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>
以上就是 直播商城源码,产品之间来回切换,选项卡之间的位移实现的相关代码,更多内容欢迎关注之后的文章