微信小程序 - 菜单左右联动示例

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

下面是效果图：

功能实现关键是使用控件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>

注：纯个人编写，用于记录，欢迎讨论，不喜勿喷。