夜光序言：
没有谁的生活会一直完美，但无论什么时候，都要看向前方，满怀希望就会所向披靡
正文：
以道御术 / 以术识道
扫描二维码关注公众号，回复：
10786154 查看本文章
<!--components/Tabs/Tabs.wxml-->
<view class="tabs">
<view class="tabs_title">
<view
class="title_item {{item.isActive?'active':''}}"
wx:for="{{tabs}}"
wx:key="id"
>
{{item.value}}
</view>
</view>
<view class="tabs_content">
</view>
</view>
/* 夜光：components/Tabs/Tabs.wxss */
.tabs{}
.tabs_title{
display: flex;
/* padding: 15rpx 0; */
}
.title_item{
display: flex;
justify-content: center;
align-items: center;
flex: 1;
padding: 15rpx 0;
}
.active{
color: var(--themeColor);
border-bottom: 5rpx solid currentColor;
}
.tabs_content{
}
// pages/goods_list/goods_list.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs:[
{
id:0,
value:"综合",
isActive:true
},
{
id: 1,
value: "销量",
isActive: false
},
{
id: 2,
value: "价格",
isActive: false
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
},
//夜光：标题的点击事件 从子组件传递过来的
handleTabsItemChange(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
})
}
})// components/Tabs/Tabs.js
Component({
/**
* 组件的属性列表
*/
properties: {
tabs:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
//夜光：定义我们的点击事件
handleItemTap(e){
//1. 获取点击的索引
const {index} = e.currentTarget.dataset;
// console.log(index)
//2. 触发父组件中的事件 自定义
this.triggerEvent("tabsItemChange",{index});
}
}
})
