一、首先看效果图
二、代码结构
1.1 tabs.js
// components/Tabs/Tabs.js
Component({
/**
* 要接收父元素的数据
*/
properties: {
tabs:{
type:Array, //类型
value:[]//默认值
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
//点击事件
handleItemTap(e){
//console.log(e)
//1. 获取点击的索引
const {index} = e.currentTarget.dataset;
//2. 触发父组件中的自定义事件
/*
将该事件传回父组件进行监听: tabsItemChage
父组件中 bindtabsItemChage="handletabsItemChage"
*/
this.triggerEvent("tabsItemChage",{index});
}
}
})
1.2 tabs.wxss
.tabs_title {
display: flex;
}
.title_item {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
padding: 15rpx 0;
}
.active {
color: var(--themeColor);
border-bottom: 5rpx solid currentColor;
}
1.3 tabs.wxml
<view class="tabs">
<view class="tabs_title">
<!-- handleItemTap 事件写在该组件的js文件中 -->
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="handleItemTap"
data-index="{{index}}"
>
{{item.value}}
</view>
</view>
<view class="tabs_content">
<slot ></slot>
</view>
</view>
2.1 index.js
// pages/goods_list/index.js
Page({
/**
* 页面的初始数据
*/
data: {
// 选择栏数据:在父组件中定义
tabs:[
{
id:0,
value:"综合",
isActive:true
},
{
id:1,
value:"销量",
isActive:false
},
{
id:2,
value:"价格",
isActive:false
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
//标题店家事件,从子组件传递过来
handletabsItemChage(e){
// console.log(e)
// 1. 获取被点击的标题索引
const {index} = e.detail;
// 2. 修改源数组
let {tabs} = this.data;
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
// 3. 给data赋值
this.setData({
tabs
})
}
})
index.json
“Tabs”:"…/…/components/Tabs/Tabs" //引入插入
{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
},
"navigationBarTitleText": "商品列表"
}
index.wxml
<Tabs tabs="{{tabs}}" bindtabsItemChage="handletabsItemChage" class="block_tab">
<block wx:if="{{tabs[0].isActive}}">0</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:else="{{tabs[2].isActive}}">2</block>
</Tabs>