小程序侧边导航栏简单实现

wxml页面



{{item.name}}






{{item.name}}





css页面
.productNav{
display: flex;
flex-direction: row;
font-family: “Microsoft YaHei”
}
.left{

width: 180rpx;
font-size: 30rpx;
background-color: #f5faff;
overflow-y:auto;
height: 100vh;

}

.right{
width:515rpx;
margin: 0;
position: relative;
left: 25rpx;
top: 4rpx;
}
.normal{
text-align: center;
height: 104rpx;
line-height: 104rpx;
font-size: 30rpx;
color: #333333
}
.normal.active{
text-align: center;
height: 104rpx;
line-height: 104rpx;
color: #1bae82;
font-size: 30rpx;
background-color: #ffffff;
position: relative;

}
.normal.active:after {
content: “”;
display: block;
height: 32rpx;
width: 7rpx;
background:rgba(51,183,229);
position: absolute;
top: 38rpx;
left: 0rpx;
border-radius: 3rpx;
font-size: 30rpx;

}
.list{
width: 100%;
overflow: auto;
zoom: 1;
}
.listBox{
width: 150rpx;
height: 150rpx;
border-radius: 15rpx;
box-shadow: 0 3rpx 11rpx 0 #999999;
float: left;
margin: 4rpx 24rpx 26rpx 4rpx;
text-align: center;
line-height: 150rpx;
color: #333333;
font-size: 30rpx;
}
.listBox:nth-child(3n+3){
margin-right: 0
}
.nav_right_list{
height:calc(100vh - 80rpx);
}
js页面
/**

• 页面的初始数据
  /
  data: {
  cutTab: 0,
  types: [“小说”, “文学”, “名著”, “外原文著”, “民间故事”, “历史”, “政治”, “艺术”, “法律”, “宗教”, “小说”, “文学”, “名著”, “外原文著”, “民间故事”, “历史”, “政治”, “艺术”, “法律”, “宗教”],
  },
  /*
• 生命周期函数–监听页面加载
  */
  onLoad: function (options) {
  this.setData({
  cutTab: 0,
  })

},
// 侧边导航点击事件
switchNav: function (e) {
var tab = e.currentTarget.dataset.currents
this.setData({
cutTab: tab,
});
console.log(this.data.cutTab)
},