微信小程序动态实现小菜单

最新推荐文章于 2024-01-04 09:18:43 发布

原创

最新推荐文章于 2024-01-04 09:18:43 发布 · 5.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#动态实现小菜单 #绑定数据 #微信小程序

本文介绍了如何在微信小程序中动态地生成并显示小菜单，包括设置数据源、wxml和wxss页面的实现细节。

微信小程序动态实现上图所示小菜单：

设置菜单数据源：


Page({

  /**
   * 页面的初始数据
   */
  data: {
    menuList: [
      [{
          name: '菜单1',
          url: '../navigateTo/navigateTo',
          content: '我是菜单一'
        },
        {
          name: '菜单2',
          url: '../logs/logs',
          content: '我是菜单二'
        },
        {
          name: '菜单3',
          url: '../movie/movie',
          content: '我是菜单三'
        },
        {
          name: '菜单4',
          url: '../userinfo/userinfo',
          content: '我是菜单四'
        }
      ],
      [{
          name: '菜单5',
          url: '121',
          content: '我是菜单五'
        },
        {
          name: '菜单6',
          url: '121',
          content: '我是菜单六'
        },
        {
          name: '菜单7',
          url: '121',
          content: '我是菜单七'
        },
        {