微信小程序选项卡功能开发步骤与方法全解析
472
2023-11-11
微信小程序实现联动菜单
最近为了实现课程设计，也做了一些前端的东西，今天想要做一个联动菜单来实现一些功能。实现了，也来做做笔记。
第1步：了解一下
左右侧菜单其实简单来讲就是把一个区域分成左右两个部分。关于组件，我觉得可以直接去微信开发文档看。通过代码，我觉得应该是可以理解的。话步多讲，直接上代码。（首先说明一点的是，我还是个刚刚接触前端的小白，可能有些写得不太好得，往各位博友多多指出改进得建议，相互学习）
第2步：先看一下效果啦
运行效率还是可以的很快，无卡顿现象。
第3步：实现（代码）
这里我只放了其中一部分，也是可以直接实现的，没有问题，可以根据自己的需要修改。
wxml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!-- 左侧滚动栏 -->
<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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
.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;
}
json
?
1
2
3
4
5
6
7
{
"usingComponents": { },
"navigationBarBackgroundColor":"自己想要的背景色",
"navigationBarTitleText": "电话查询",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~