热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

微信小程序实现菜单左右联动

这篇文章主要为大家详细介绍了微信小程序实现菜单左右联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现菜单左右联动的具体代码,供大家参考,具体内容如下

今天记录一个个人写的二级联动示例。

下面是效果图:

功能实现关键是使用控件scroll-view,下面直接上示例代码。

页面对应的js文件:

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
Page({
 data: {
 select_index:0,
 scroll_height:0,
 left: [{
 id: 1,
 title: '选项一'
 },
 {
 id: 2,
 title: '选项二'
 },
 {
 id: 3,
 title: '选项三'
 },
 {
 id: 4,
 title: '选项四'
 },
 {
 id: 5,
 title: '选项五'
 },
 {
 id: 6,
 title: '选项六'
 },
 {
 id: 7,
 title: '选项七'
 }
 ],
 right:[
 {
 id: 1,
 title: '选项一',
 content:[
  {
  title:"产品一"
  },
  {
  title: "产品二"
  },
  {
  title: "产品三"
  },
  {
  title: "产品四"
  },
 ]
 },
 {
 id: 2,
 title: '选项二',
 content: [
  {
  title: "产品一"
  },
  {
  title: "产品二"
  },
  {
  title: "产品三"
  },
  {
  title: "产品四"
  },
 ]
 },
 {
 id: 3,
 title: '选项三',
 content: [
  {
  title: "产品一"
  },
  {
  title: "产品二"
  },
  {
  title: "产品三"
  },
  {
  title: "产品四"
  },
 ]
 },
 {
 id: 4,
 title: '选项四',
 content: [
  {
  title: "产品一"
  },
  {
  title: "产品二"
  },
  {
  title: "产品三"
  },
  {
  title: "产品四"
  },
 ]
 },
 {
 id: 5,
 title: '选项五',
 content: [
  {
  title: "产品一"
  },
  {
  title: "产品二"
  },
  {
  title: "产品三"
  },
  {
  title: "产品四"
  },
 ]
 },
 {
 id: 6,
 title: '选项六',
 content: [
  {
  title: "产品一"
  },
  {
  title: "产品二"
  },
  {
  title: "产品三"
  },
  {
  title: "产品四"
  },
 ]
 },
 {
 id: 7,
 title: '选项七',
 content: [
  {
  title: "产品一"
  },
  {
  title: "产品二"
  },
  {
  title: "产品三"
  },
  {
  title: "产品四"
  },
 ]
 }
 ]
 },
  
 // 右边scroll-view滑动事件
 scroll:function(e){
 var h = e.detail.scrollTop
 var scroll_height = 0;
 var select_index;
 for (var i = 0; i <this.data.right.length; i++)="" {="" if="" (scroll_height="">= h){
 select_index = i;
 break;
 }
 scroll_height += this.data.right[i].content.length * 64 + 48;
 }
 this.setData({
 select_index: i,
 });
 },
  
 //左边点击事件
 left_tap:function(e){
 var scroll_height = 0;
 for (var i = 0; i <e.target.dataset.index;i++){ scroll_height="" +="this.data.right[i].content.length" *="" 64="" 48;="" }="" console.log(scroll_height)="" this.setdata({="" scroll_height:="" scroll_height,="" select_index:="" e.target.dataset.index,="" });="" })<="" pre="">
</e.target.dataset.index;i++){></this.data.right.length;>

页面对应的wxml文件:


 
 
 
 
 {{item.title}}
 
 
 
 
 
 
 
 
  {{item.title}}
  
  
  {{item.title}}
  
  
 
 
 
 
 
 

注:纯个人编写,用于记录

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 本文将深入探讨PHP编程语言的基本概念,并解释PHP概念股的含义。通过详细解析,帮助读者理解PHP在Web开发和股票市场中的重要性。 ... [详细]
  • 本文详细介绍了如何使用 PHP 接收并处理微信支付的回调结果,确保支付通知能够被正确接收和响应。 ... [详细]
  • 微信小程序:授权登录与手机号绑定
    本文详细介绍了微信小程序中用户授权登录及绑定手机号的流程,结合官方指引和实际开发经验,提供了一套完整的实现方案,帮助开发者更好地理解和应用。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 程序员如何优雅应对35岁职业转型?这里有深度解析
    本文探讨了程序员在职业生涯中如何通过不断学习和技能提升,优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势,并提供实用的学习路径。 ... [详细]
  • 微信小程序中实现位置获取的全面指南
    本文详细介绍了如何在微信小程序中实现地理位置的获取,包括通过微信官方API和腾讯地图API两种方式。文中不仅涵盖了必要的准备工作,如申请开发者密钥、下载并配置SDK等,还提供了处理用户授权及位置信息获取的具体代码示例。 ... [详细]
  • 本文探讨了在C语言编程中,如何有效避免多文件项目中的重定义问题,通过合理使用预处理器指令和extern关键字,确保代码的健壮性和可维护性。 ... [详细]
  • 区块链的兴起:恰逢其时,犹如1996年的互联网
    本文探讨了区块链技术的发展阶段,将其与1996年互联网的兴起进行对比,分析了当前区块链技术的现状及其未来潜力。 ... [详细]
  • 掌握Spring MVC中自定义类型转换与格式化的技巧
    近期,在开发一款小程序的过程中遇到了几个Spring MVC接口需要传递时间参数的问题。本文将详细介绍如何利用Java 8 Time API在Spring MVC中实现时间参数的自定义类型转换和格式化。 ... [详细]
  • 探讨在微信小程序环境中是否能够获取到全局this对象,并分析其背后的技术实现。 ... [详细]
  • 智慧城市建设现状及未来趋势
    随着新基建政策的推进及‘十四五’规划的实施,我国正步入以5G、人工智能等先进技术引领的智慧经济新时代。规划强调加速数字化转型,促进数字政府建设,新基建政策亦倡导城市基础设施的全面数字化。本文探讨了智慧城市的发展背景、全球及国内进展、市场规模、架构设计,以及百度、阿里、腾讯、华为等领军企业在该领域的布局策略。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 基于KVM的SRIOV直通配置及性能测试
    SRIOV介绍、VF直通配置,以及包转发率性能测试小慢哥的原创文章,欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]
  • 本文详细介绍了 RosPack 类的功能和用法,探讨了其在 ROS 系统中的重要作用。RosPack 类提供了类似于终端命令 rospack 的功能,能够方便地查询和管理 ROS 包的相关信息。 ... [详细]
author-avatar
cjcstc@163.com
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有