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


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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 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获取地址栏信息的代码
2008/10/08 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
JavaScript 基础篇(一)
2012/03/30 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python的SQLAlchemy框架使用入门
2015/04/29 Python
python中管道用法入门实例
2015/06/04 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
门诊挂号室室长岗位职责
2013/11/27 职场文书
经典演讲稿范文
2013/12/30 职场文书
全运会口号
2014/06/20 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
申报优秀教师材料
2014/12/16 职场文书