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%;justif烤恤鹇灭y-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会发现标签下的红色底边框跟随切换
