最近为了实现课程设计，也做了⼀些前端的东西，今天想要做⼀个联动菜单来实现⼀些功能。实现了，也来做做笔记。
第1步：了解⼀下
左右侧菜单其实简单来讲就是把⼀个区域分成左右两个部分。关于组件，我觉得可以直接去开发⽂档看。通过代码，我觉得应该是可以理解的。话步多讲，直接上代码。（⾸先说明⼀点的是，我还是个刚刚接触前端的⼩⽩，可能有些写得不太好得，往各位博友多多指出改进得建议，相互学习）
第2步：先看⼀下效果啦
运⾏效率还是可以的很快，⽆卡顿现象。
第3步：实现（代码）
这⾥我只放了其中⼀部分，也是可以直接实现的，没有问题，可以根据⾃⼰的需要修改。
wxml
<!-- 左侧滚动栏 -->
<view class ='total'>
<view class='under_line'></view>
<view style='float: left' class='left'>
<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'>
<view class='all clear'>
<block wx:key="lists" wx:for="{{lists}}">
<view bindtap='jumpIndex' data-menuindex='{{index}}'>
<view class='text-style'>
<text class="{{indexId==index?'active1':''}}">{{item}}</text>
<text class="{{indexId==index?'active':''}}"></text>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
<!--右侧栏-->
<view class="right">
<!--判断indexId值显⽰不同页⾯-->
<view wx:if="{{indexId==0}}">
<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'>
<view class='all clear'>
<block wx:key="lists_r0" wx:for="{{lists_r0}}">
<view bindtap='jumpIndexR0' data-menuindex='{{index}}'>
<view class='text-style2'>
食谱美食菜谱小程序<text class="{{indexIdr0==index?'active2':''}}">{{item}}</text>
<text class="{{indexIdr0==index?'active3':''}}"></text>
</view>
</view>
</block>
</view>
</scroll-view>
物理练习题
</view>
<view wx:if="{{indexId==1}}">
<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'>
<view class='all clear'>
<block wx:key="lists_r1" wx:for="{{lists_r1}}">
<view bindtap='jumpIndexR0' data-menuindex='{{index}}'>
<view class='text-style2'>
<text class="{{indexIdr0==index?'active2':''}}">{{item}}</text>
<text class="{{indexIdr0==index?'active3':''}}"></text>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</view>
</view>
wxss
.under_line{
width: 100%;
border-top: 1rpx solid #efefef;
}
.
left {
border-top: 1rpx solid #efefef;
border-right: 1rpx solid #efefef;
}
.text-style {
width: 200rpx;
height: 140rpx;
line-height: 140rpx;
text-align: center;
font-size: 34rpx;
font-family: PingFangSC-Semibold; color: rgba(51, 51, 51, 1);
}
.active3 {
display: block;
width: 500rpx;
height: 6rpx;
background: rgb(88, 123, 193);
position: relative;
left: 0rpx;
bottom: 30rpx;
}
.active2 {
color: rgb(88, 123, 193);
}
.active1 {
color: #96C158;
}
.active {
display: block;
width: 50rpx;
height: 6rpx;
background: #96C158;
position: relative;
left: 75rpx;
bottom: 30rpx;
}
.scrollY {
width: 210rpx;
position: fixed;
left: 0;
top: 0;
border-right: 1rpx solid #efefef;
}
.right{
border-top: 1rpx solid #efefef;
border-left: 1rpx solid rgba(0,0,0,0.0); margin-left: 2rpx;
八年级上册物理课件}
.scrollY2 {
width: 520rpx;
position: fixed;
right: 0;
top: 0;
border-left: 1rpx solid rgba(0,0,0,0); margin-left: 2rpx;
}
.text-style2 {
width: 520rpx;
height: 140rpx;
line-height: 140rpx;
text-align: left;
font-size: 34rpx;
font-family: PingFangSC-Semibold; color: rgba(51, 51, 51, 1);
}
.button_call{
height: 90rpx;
width: 90rpx;
position: fixed;
bottom: 150rpx;
right: 13rpx;
opacity: 0.7;
z-index: 100;
}
js
Page({
/**
* 页⾯的初始数据
*/
data: {
lists: [
"主类1", "主类2", "主类3", "学⽣⼯作部", "党委部门", "校⼯与教务", "离退休⼯作处", "保卫处", "财务与审计", "实验室与设备", "⼈事处", "保卫处", "学院", "直属单位", "其他"
诺如病毒是什么病],
lists_r0: [
"主类1的⼦类1",
"主类1的⼦类2", "主类1的⼦类3", "主类1的⼦类4", "党委部门", "校⼯与教务", "离退休⼯作处", "保卫处", "财务与审计", "实验室与设备", "⼈事处", "保卫处", "学院", "直属单位", "其他" ],
lists_r1: [
"主类2的⼦类1",
"主类2的⼦类2", "主类2的⼦类3", "主类2的⼦类4", "党委部门", "校⼯与教务", "离退休⼯作处", "保卫处", "财务与审计", "实验室与设备", "⼈事处", "保卫处", "学院", "直属单位", "其他" ],
indexId: 0,
indexIdr0: 0,
indexIdr0: 1,
},
// 左侧点击事件
jumpIndex(e) {
let index = e.uindex
let that = this
that.setData({
indexId: index
});
},
jumpIndexR0(e) {
let index = e.uindex
let that = this
that.setData({
indexIdr0: index
});
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function(options) {
var that = this
success: function(res) {
that.setData({
winHeight: res.windowHeight
});
}
});
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function() {
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function() {
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
2012成都中考数学onHide: function() {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function() {
},
/**
新课标教案* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function() {
}
})
json
{
"usingComponents": { },
"navigationBarBackgroundColor":"⾃⼰想要的背景⾊",
"navigationBarTitleText": "电话查询",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
发布评论