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


Posted in Javascript onMay 19, 2020

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

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

下面是效果图:

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

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

页面对应的js文件:

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,
 });
 }
})

页面对应的wxml文件:

<view class='main'>
 
 <view class='left'>
 <scroll-view scroll-y="true" scroll-with-animation="true">
 <block wx:for="{{left}}" wx:for-index="index">
 <view class='{{select_index==index?"active":""}}' data-index="{{index}}" bindtap='left_tap'>{{item.title}}</view>
 </block>
 </scroll-view>
 </view>
 
 <view class='right'>
 <scroll-view scroll-y="true" scroll-top="{{scroll_height}}" bindscroll="scroll" scroll-with-animation="true">
 <block wx:for="{{right}}">
 <view class='block'>
  <view style='background: lightgrey;'>{{item.title}}</view>
  <view class='list'>
  <block wx:for="{{item.content}}">
  <view>{{item.title}}</view>
  </block>
  </view>
 </view>
 </block>
 
 </scroll-view>
 </view>
 
</view>

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

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

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

Javascript 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
canvas绘制多边形
Feb 24 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
JS array数组检测方式解析
May 19 #Javascript
基于JS实现table导出Excel并保留样式
May 19 #Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 #Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
JS加载解析Markdown文档过程详解
May 19 #Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 #Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
You might like
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
jquery图片切换插件
2015/03/16 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python 字典与字符串的互转实例
2017/01/13 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
Python中的整除和取模实例
2020/06/03 Python
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
意向协议书范本
2014/04/23 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
捐款活动总结
2014/08/27 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
总结Pyinstaller打包的高级用法
2021/06/28 Python
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript