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

发布时间：2020-07-23 14:39:20 作者：小猪
来源：亿速云阅读：842

小编这次要给大家分享的是微信小程序如何实现菜单左右联动，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

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

下面是效果图：

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

功能实现关键是使用控件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&#63;"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>

看完这篇关于微信小程序如何实现菜单左右联动的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。

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

相关阅读