小程序組件：分級列表

簡介

使用本插件，可以小程序中快速實現分級列表的功能

示例

下載

請前往http://www.weimiaotech.com/discuz/forum.php下載組件代碼。

使用

• 解壓組件代碼，在小程序主目錄下創建目錄wmzj，用於存放小程序組件代碼，目錄結構如下：
  

• 在頁面page.wxml中引入組件模板

<import src="/wmzj/hierarchical_list/hierarchical_list.wxml"/>
<template is="wmzj_hierarchical_list" data="{{hierarchical_list_data}}"/>

• 在頁面page.wxss中引入組件樣式

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

• 在頁面page.js中加入初始數據和時間相應函數

// 引入組件js文件
var hierarchical_list = require("../../wmzj/hierarchical_list/hierarchical_list.js");

Page({
  data: {
    // 組件初始化數據
    hierarchical_list_data: [
      {
        name: "動物",
        sub_name: ["猴子", "長頸鹿", "龍"]
      },
      {
        name: "汽車品牌",
        sub_name: ["法拉利", "蘭博基尼", "保時捷"]
      },
      {
        name: "地名",
        sub_name: ["廣州", "深圳"]
      },
    ]
  },

  // 組件初始函數
  HierarchicalListFunc: function (e) {
    hierarchical_list.HierarchicalListFunc(e);
  },

  // 組件點擊事件
  ClickSubItem: function(e) {
    console.log(e);
    var sub_item = e.currentTarget.dataset.subitem;
    wx.showModal({
      showCancel: false,
      title: '點擊列表',
      content: sub_item,
    })
  }

})

打賞

如果覺得wmzj對您有用，請隨意打賞。您的支持將鼓勵我繼續創作！

更多合作

微信：mmxingkong123 QQ：2733702796