微信小程序 - 菜單左右聯動示例

今天記錄一個個人寫的二級聯動示例。

下面是效果圖：

功能實現關鍵是使用控件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>

注：純個人編寫，用於記錄，歡迎討論，不喜勿噴。