本文实例为大家分享了微信小程序实现左侧导航栏的具体代码，供大家参考，具体内容如下
wxml
8：00-9：00 9：00-10：00 14：00-15：00 15：00-16：00 专家A 专家B 专家C 专家D
wxss
.content {
display: flex;
flex-direction: row;
font-family: "Microsoft YaHei"
}
.left {
width: 30%;
font-size: 10px;
height: 500px;
background-color: #F4F4F4;
}
.left view {
text-align: center;
height: 45px;
line-height: 45px;
}
.select {
background-color: #ffffff;
border-left: 2px solid #36AE66;
font-weight: bold;
color: #36AE66;
}
.normal {
background-color: #F4F4F4;
border-bottom: 1px solid #f2f2f2;
}
.right {
width: 70%;
margin: 0px;
}
js
Page({
data: {
flag: 0,
currentTab: 0
},
switchNav: function(e) {
var page = this;
var id = e.target.id;
if (this.data.currentTab == id) {
return false;
} else {
page.setData({
currentTab: id
});
}
page.setData({
flag: id
});
},
catchTouchMove: function (res) {
return false
}
})
实现效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。