uniapp--点击选项卡切换&&滑动切换
效果:
创建子组件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;
}
整合代码:
父组件使用子组件tab-slide:
1. 使用子组件:
①import
import tabSlide from "../../components/tab-slide/tab-slide.vue";
②注册:
components: {
tabSlide
},
③使用:(向子组件传递tabs,tabIndex,和tabtap事件)
<tab-slide :tabs="tabs" :tabIndex="tabId" @tabtap="tabtap">tab-slide>
2. 编写父组件代码
html
<template>
<view class="page">
<tab-slide :tabBars="tabBars" :tabIndex="tabId" @tabtap="tabtap">tab-slide>
// 父组件代码
view>
template>
①使用swiper组件(滑块视图容器,常用于轮播图)
:style 绑定样式
@change 绑定change方法(current 改变时会触发)
:current 绑定当前所在滑块的index
<swiper
class="swiper-box"
:style="{height:swiperHeight+'px'}"
@change="tabChange"
:current=tabId>
swiper>
②添加swiper-item(一级循环)
<swiper-item v-for="(items,index) in activity" :key="index">
swiper-item>
③添加scroll-view组件(纵向滚动)
<scroll-view scroll-y class="list">scroll-view>
④添加template组件(用于条件渲染)
<template v-if="ms.acCl.length > 0">
template>
⑤添加view标签进行二次循环
<view class="activities" v-for="(item,index1) in items.acCl" :key="index1">
view>
⑥填充需要展示的内容代码
整合代码:
<view class="uni-tab-bar">
<swiper
class="swiper-box"
:style="{height:swiperheight+'px'}"
@change="tabChange"
:current=tabId>
<swiper-item v-for="(items, index) in activity" :key="index">
<scroll-view scroll-y class="list">
<template v-if="items.acCl.length > 0">
<view class="acticities" v-for="(item,index1) in items.acCl" :key="index1">
<view class="content-left">
<image :src="item.img">image>
view>
<view class="content-right">
<view class="name">{{item.name}}view>
<span class="status">{{item.status}}span>
<view class="time">{{item.time}} {{item.address}}view>
view>
view>
template>
scroll-view>
swiper-item>
swiper>
view>
script
①在data对象里添加数据
data(){
return{
swiperHeight:500,
tabId:0,
tabs:[],
activity:[
{
items:[]
},
{
items:[]
}
{
items:[]
}
]
}
}
②编写方法:
tabtap() 是点击选项卡切换
tabChange() 是滑动切换
methods: {
tabtap(index){
this.tabId = index;
},
tabChange(e){
this.tabId = e.detail.current
}
}
③动态计算高度(onLoad生命周期里面写)
onLoad(){
uni.getSystemInfo({
success:(res)=>{
let height = res.windowHeight-uni.upx2x(100)
this.swiperHeight = height;
}
})
}
整合代码:
<script>
import tabSlide from '../../components/tab-slide/tab-slide.vue';
export default {
components: {
tabSlide
},
data() {
return {
swiperheight:500,//高度
tabId: 0,
tabBars: [{},{},{}, {},{}],
activity:[
{acCl:[]},
{acCl:[]},
{acCl:[]},
{acCl:[]},
{acCl:[]}
],
}
},
onLoad() {
uni.getSystemInfo({
success:(res) => {
let height = res.windowHeight-uni.upx2px(100)
this.swiperHeight = height
}
});
},
methods: {
tabtap(index){
this.tabId = index;
},
tabChange(e){
this.tabId = e.detail.current;
}
},
};
</script>
完整代码:
子组件:
<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>
export default {
name:"tab-slide",
props: {
tabBars:Array,
tabIndex:Number,
scrollStyle:{
type:String,
default:""
},
scrollItemStyle:{
type:String,
default:""
}
},
methods:{
// 点击切换导航
tabtap(index){
this.$emit('tabtap',index)
}
}
}
script>
<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>
父组件:
<template>
<view class="page">
<tab-slide :tabBars="tabBars" :tabIndex="tabId" @tabtap="tabtap">tab-slide>
<view class="uni-tab-bar">
<swiper
class="swiper-box"
:style="{height:swiperheight+'px'}"
@change="tabChange"
:current=tabId>
<swiper-item v-for="(items, index) in activity" :key="index">
<scroll-view scroll-y class="list">
<template v-if="items.acCl.length > 0">
<view class="acticities" v-for="(item,index1) in items.acCl" :key="index1">
// your code
view>
template>
scroll-view>
swiper-item>
swiper>
view>
view>
template>
<script>
import tabSlide from '../../components/tab-slide/tab-slide.vue';
export default {
components: {
tabSlide
},
data() {
return {
swiperheight:500,//高度
tabId: 0,
tabBars: [{},{},{}, {},{}],
activity:[
{acCl:[]},
{acCl:[]},
{acCl:[]},
{acCl:[]},
{acCl:[]}
],
}
},
onLoad() {
uni.getSystemInfo({
success:(res) => {
let height = res.windowHeight-uni.upx2px(100)
this.swiperHeight = height
}
});
},
methods: {
tabtap(index){
this.tabId = index;
},
tabChange(e){
this.tabId = e.detail.current;
}
},
};
script>
<style scoped lang="scss">
style>