页面效果如下：
image
image
<!--pages/home/home.wxml-->
<view class="list">
<!-- 变量为dataIndex所以需存初始值在js文件的data里面，通过改变此值控制切换 -->
<!-- 通过class="{{dataIndex===0?'active':''}}"设置active样式随dataIndex而变 -->
<view bindtap="tab" data-id='0' class="{{dataIndex===0?'active':''}}">开发</view>
<view bindtap="tab" data-id='1' class="{{dataIndex===1?'active':''}}">介绍</view>
<view bindtap="tab" data-id='2' class="{{dataIndex===2?'active':''}}">设计</view>
</view>
<!-- 通过wx:if设置此div是否出现 -->
<view wx:if="{{dataIndex===0}}">00000000</view>
<view wx:if="{{dataIndex===1}}">1111111</view>
<view wx:if="{{dataIndex===2}}">222222</view>
/* pages/home/home.wxss */
.list{
display: flex;
justify-content: space-between;
align-items: center;
}
.list view{
flex: 1;
text-align: center;
padding: 3px 5px;
}
.list .active{
border-bottom: 4rpx solid red;
}
// pages/home/home.js
Page({
tab(e){
console.log(e)
//通过e.currentTarget.dataset.id访问data-id
let index = parseInt(e.currentTarget.dataset.id)
this.setData({
dataIndex: index
})
},
/**
* 页面的初始数据
*/
data: {
//设置初始dataIndex为0，这样第一个view显示active
dataIndex:0
}
})
emmmm文章写的比较粗糙，见谅啦！~~~~~
