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

最新推荐文章于 2024-05-09 16:29:33 发布

原创

最新推荐文章于 2024-05-09 16:29:33 发布 · 4.4k 阅读

33 ·

CC 4.0 BY-SA版权

本文分享了一个微信小程序中实现的二级菜单联动效果。关键在于利用scroll-view组件，提供了对应的JS和WXML代码示例，旨在记录和讨论。

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

下面是效果图：

功能实现关键是使用控件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: "产品四"
          },
        ]
      },