uniapp实现选项卡切换
前言
本篇文章主要练习使用uniapp来实现选项卡切换，并且展示响应的内容并且用到了组件间的传送值，通信。并且附加选项卡第一页的轮播图展示并且实现点击图片预览功能
一、主要实现的步骤及技术讲解
注意：dome涉及到的数据在真实项目中是获取真实的接口数据，此处知识模拟数据实现对应功能。
1、创建项目的公用组件
1、新建components文件夹用于存放公用组件
//tabs.vue
2、在父组件中使用组件
//tabs_detail.vue
引入组件
import tabs from '../../components/tabs.vue'
注册components
components: {
tabs,
}
使用组件
<tabs/>
2、利用props实现父子组件之间传递值
1、首先在组件tabs.vue中设置props属性
props: {
tabs: {
type: Array,
default: []
}
}
2、在父组件中将值传递给子组件使用
//tabs_detail.vue
定义数据
tablist: [{
index: 0,
value: '第一列',
isActive: true
},
{
index: 1,
value: '第二列',
isActive: false
},
{
index: 2,
value: '第三列',
isActive: false
}
],
传递值
<tabs :tabs='tablist'/>
3、根据数据显示不同选项卡内容
通过子组件来派发事件来通知父组件，父组件监听事件来实现父子组件通信。
//tabs.vue定义方法
methods:{
handlerActive(index){
this.$emit('tabActive',index)
}
}
//tabs_detail.vue监听方法
<tabs :tabs='tablist' v-on:tabActive='tabActive' />
通过传递的参数索引来切换对应的内容
tabActive(tabIndex) {
this.tablist.map((value, index) => {
value.isActive = tabIndex == index ? true : false
})
this.contentIndex = tabIndex//内容索引
},
根据索引判断内容
<block v-if="contentIndex==0">内容一</block>
<block v-if="contentIndex==1">内容二</block>
<block v-if="contentIndex==2">内容三</block>
4、实现点击轮播图的对应图片预览功能
使用uniapp自带的swiper在每一轮播项图片中添加点击事件
并且传递当前点击图片可以是一个数值
previewpic(itemsrc){
uni.previewImage({
current:itemsrc,
urls:["../../static/3.png","../../static/4.png"]
})
},
二、完整代码
1.tabs.vue
<template>
<view>
<view class="content_items">
<view class="content_item"
v-for="(item,index) in tabs"
:key="item.index"
:class="item.isActive ? 'active' : ''"
@tap="handlerActive(item.index)"
>
{
{
item.value}}
</view>
</view>
<slot></slot>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props: {
tabs: {
type: Array,
default: []
}
},
methods:{
handlerActive(index){
this.$emit('tabActive',index)
}
}
}
</script>
<style lang="scss">
.content_items {
display: flex;
.content_item {
text-align: center;
float: left;
padding: 10rpx 0;
flex: 1;
}
}
.active {
color: #EB4450;
border-bottom: 5rpx solid #DD524D;
}
</style>
2.tabs_detail.vue
<template>
<view>
<view class="content">
<tabs :tabs='tablist' v-on:tabActive='tabActive' />
<block v-if="contentIndex==0">
<view class="swiperr">
<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" circular="true">
<swiper-item>
<view class="swiper-item" @tap="previewpic(0)">
<image class="images" src="../../static/3.png"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item" @tap="previewpic(1)">
<image class="images" src="../../static/4.png"></image>
</view>
</swiper-item>
</swiper>
</view>
</block>
<block v-if="contentIndex==1">
第二页内容
</block>
<block v-if="contentIndex==2">
第三页内容
</block>
</tabs>
</view>
</view>
</template>
<script>
import tabs from '../../components/Tabs.vue'
export default {
data() {
return {
tablist: [{
index: 0,
value: '第一列',
isActive: true
},
{
index: 1,
value: '第二列',
isActive: false
},
{
index: 2,
value: '第三列',
isActive: false
}
],
contentIndex: '',
images: []
}
},
methods: {
tabActive(tabIndex) {
this.tablist.map((value, index) => {
value.isActive = tabIndex == index ? true : false
})
this.contentIndex = tabIndex
},
previewpic(itemsrc){
uni.previewImage({
current:itemsrc,
urls:["../../static/3.png","../../static/4.png"]
})
}
},
components: {
tabs,
}
}
</script>
<style lang="scss">
swiper {
height: 400rpx;
image {
width: 100%;
}
}
</style>
三、最终效果展示
总结
总结不易如遇到问题欢迎指出，必虚心接受，欢迎讨论。。。