小程序组件：分级列表

简介

使用本插件，可以小程序中快速实现分级列表的功能

示例

下载

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