微信小程序自定义组件制作标题栏详解

微信小程序自定义组件制作标题栏

效果：
点击哪个标题，哪个标题就变红且有红色下划线

1. 在资源管理器根目录下新建组件文件夹components

2. 在某页面的json文件下新增组件名及其路径

3. 在此页面的wxml下放置设置好的组件

4. 此时就可以在组件中操作此页面了
在组件的js文件放入标题数组，isactive属性均设置false

在组件的wxss设置样式，在wxml的结构中加入各种类

<view><!--最外框-->  
<view class="tabs-title">  <!--利用三目运算设置isactive--> 
<view class="title-item {{item.isactive?'active':''}}" wx:for="{{list}}" wx:key="id" bindtap="handleItemTab" data-index="{{index}}">    
{{item.name}}  <!--循环数组-->
</view>  
</view>  
<view>内容</view>
</view>

data-xxx为自定义属性，在js文件中{index}获取到了被点击的那个数组的索引值

.tabs-title{  display: flex;  padding:"10rpx";}
.title-item{  
display: flex;  
flex: 1;  
justify-content: center;  
align-items: center;}
.active{  
color: red;  
border-bottom:10rpx solid currentColor;
}

在title-item处用bindTap绑定事件用于点击标题使标题样式发生变化

methods: 
{  
handleItemTab(e){    
const {index}=e.currentTarget.dataset;//获取数组索引    
let {list}=this.data;//相当于list=this.data.list//获取数组    
list.forEach((v,i)=>i===index?v.isactive=true:v.isactive=false);//相当于this.data.list.forEach......
this.data.list.forEach......//遍历数组      
this.setData({
        list      
        })  
        }  
        }

利用forEach遍历list数组，若遍历得到的数组的索引==点击获取到的索引，则此索引对应的数组的isactive属性设置为true，以此控制选中的标题改变样式