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

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

创建子组件vue文件tab-slide(选项卡部分):

html部分

①利用uniapp组件scroll-view横向滑动

 

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

​②遍历选项卡标题,用block标签(无样式意义,只用于列表渲染)

scrollStyle:父级样式设置

关于template和block的用法

 

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

③tab选项(name和下划线)

 

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

④为tab选项添加属性

 

1	<-- 绑定tab选项样式 --><br>:style="scrollItemStyle"<br><-- 绑定tab选项被选择后的样式 --><br>:class="{'active':tabIndex==index}"<br><-- 绑定tab选项的点击事件 --><br>@tap="tabtap(index)"

整合代码:

 

1

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

script部分

①通过props接受父组件传递过来的数据

 

1	props:{<br>tabs:Array,<br>tabIndex:Number,<br>}

补充知识点:父组件传值给子组件用props;子组件传值给父组件用$emit

②编写点击事件:(向父组件提交一个事件和值)

在这里提交的事件在父组件中以@tabtap="tabtap"关联父组件

 

1	tabtap(index){<br>this.$emit('tabtap',index)<br>}

整合代码:

 

1	<script><br>export default {<br>name:"tab-slide",<br>props: {<br>tabBars:Array,<br>tabIndex:Number,<br>},<br>methods:{<br>// 点击切换导航<br>tabtap(index){<br>this.$emit('tabtap',index)<br>}<br>}<br>}<br></script>

css部分

①给横向滚动加一条下边框:

 

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

②设置active时的字体颜色:

 

1	.active{<br>color: #343434;<br>}

③设置active和line样式

 

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

整合代码:

 

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

 

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