小程序組件：下拉菜單

簡介

使用本插件，可以小程序中快速實現下拉菜單的功能

示例

下載

請前往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