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


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 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
关于document.cookie的使用javascript
Apr 11 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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
Terran兵种介绍
2020/03/14 星际争霸
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
php 数组使用详解 推荐
2011/06/02 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python3将视频流保存为本地视频文件
2018/06/20 Python
详解Python中is和==的区别
2019/03/21 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
使用python实现飞机大战游戏
2020/03/23 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
幼儿园优秀教师事迹
2014/02/13 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
先进集体申报材料
2014/12/25 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书