1、打开开发者工具，新建项目在项目的pages文件夹下创建一个mypage文件夹，并在文件夹内新建mypage，在app.json中将mypage设为第一页面
2、在mypage.wxml中添加代码如下：
<view class="outter">
<view data-tapid="0" class="slid-item {{currentid==0?'on':''}}" bindtap="tap">读书</view>
<view data-tapid="1" class="slid-item {{currentid==1?'on':''}}" bindtap="tap">出游</view>
<view data-tapid="2" class="slid-item {{currentid==2?'on':''}}" bindtap="tap">观影</view>
</view>
data-tapid是事件触发时的会存在事件对象的 target.dataset.tapid中
currentid是js文件中变量，通过这个变量值，控制样式
3、在mypage.wxss中添加代码如下：
.outter{
display: flex;
width: 100%;
justify-content: center;
border-bottom: 2rpx solid black
}
.slid-item{
margin-left: 20rpx;
margin-right: 20rpx;
}
.on{
border-bottom: 3rpx solid red;
}
4、在mypage.js文件中，添加currentid变量，代码如下：
5、编译代码，在左侧模拟器查看效果，基本实现了要求，下一步动态更改选中的
currentid
6、在mypage.js文件添加一个事件函数，代码如下：
tap:function(e){
console.log(e)
console.log(e.target.dataset.tapid)
var that = this
that.setData({currentid:e.target.dataset.tapid})
}
console.log(e)是测试观察输入用的
7、编译运行，在左侧模拟器切换tab会发现标签下的红色底边框跟随切换
