微信小程序 navbar实例详解
实现效果图：
data
js
//添加点击模板点击事件
for (var i = 0; i < appInstance.typeList.length; i++) {
(function (item) {
pageObject['bind' + item.id] = function (e) {
this.setData({
currentTypeId: e.currentTarget.dataset.index
})
}
})(appInstance.typeList[i])
}
for (var i = 0; i < appInstance.typeList.length; i++) {
(function (item) {
pageObject['bind' + item.id] = function (e) {
this.setData({
currentTypeId: e.currentTarget.dataset.index
})
}
})(appInstance.typeList[i])
}
wxml
wxss
.menu {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
dt {
width: 25%;
height: 100rpx;
}
.noCurrentType {
height: 90rpx;
color: black;
padding-left: 30rpx;
border: 1px solid;
background-color: #c2c2c2;
}
.yesCurrentType {
color: black;
padding-left: 30rpx;
}
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
