小程序组件：下拉菜单

简介

使用本插件，可以小程序中快速实现下拉菜单的功能

示例

下载

请前往http://www.weimiaotech.com/discuz/forum.php下载组件代码。

使用

• 解压组件代码，在小程序主目录下创建目录wmzj，用于存放小程序组件代码，目录结构如下：
  

• 在页面page.wxml中引入组件模板

    <import src="/wmzj/dropdown_menu/dropdown_menu.wxml"/>
    <template is="wmzj_dropdown_menu" data="{{menu_data}}"/>

• 在页面page.wxss中引入组件样式

@import "/wmzj/dropdown_menu/dropdown_menu.wxss";

• 在页面page.js中加入初始数据和时间相应函数

// 引入组件js文件
var dropdown_menu = require("../../wmzj/dropdown_menu/dropdown_menu.js");

Page({
  data: {
    // 组件初始化数据
    menu_data: {
      menu_items: [
        {
          name: "动物",
          sub_name: ["猴子","长颈鹿","龙"]
        },
        {
          name: "汽车品牌",
          sub_name: ["法拉利","兰博基尼","保时捷"]
        },
        {
          name: "地名",
          sub_name: ["广州","深圳"]
        },
      ]
    }
  },

  // 组件初始函数
  DropDownMenuFunc: function(e) {
    dropdown_menu.DropDownMenuFunc(e);
  },

  // 组件选择事件
  ClickSubMenu: function(e) {
    console.log(e);
    var menu_name = e.currentTarget.dataset.menuname;
    var sub_name = e.currentTarget.dataset.subname;
    wx.showModal({
      showCancel: false,
      title: '点击菜单',
      content: menu_name + '-' + sub_name,
    })
  }
})

打赏

如果觉得wmdz对您有用，请随意打赏。您的支持将鼓励我继续创作！

更多合作

微信：mmxingkong123 QQ：2733702796