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


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 相关文章推荐
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
基于python代码批量处理图片resize
2020/06/04 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
大学学生会竞选演讲稿
2014/04/25 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
运动会拉拉队口号
2014/06/09 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
会计求职自荐信
2015/03/26 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书