微信小程序使用weui扩展组件index-list

效果展示

demo地址

1. 安装

1. 需要使用npm安装

npm i weui-miniprogram -S --production
npm install @miniprogram-component-plus/index-list

2. 在app.wxss中加入以下代码：

/**app.wxss**/
@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

3. 点击微信开发者工具栏-工具-构建npm：
   

2.使用

1. 页面中引入组件，例如我的：

# index.json
{
  "navigationBarTitleText": "选择城市",
  "navigationBarBackgroundColor": "#18af69",
  "usingComponents": {
    "mp-index-list": "@miniprogram-component-plus/index-list"
  }
}

2. 页面中使用组件，例如我的：

# index.wxml
<mp-index-list class="city__list" list="{{lists}}" vibrated="{{ true }}" bindchoose="onChoose">
</mp-index-list>

3. 页面js中添加数据，例如我的：

Page({
  data: {
    lists: [
      { alpha: "A", subItems: [{ name: "安庆市" }] },
      { alpha: "B", subItems: [{ name: "蚌埠市" }] },
      { alpha: "H", subItems: [{ name: "淮南市" }, { name: "淮北市" }] },
      { alpha: "M", subItems: [{ name: "马鞍山市" }] },
      { alpha: "T", subItems: [{ name: "铜陵市" }] },
      { alpha: "W", subItems: [{ name: "芜湖市" }] },
    ],
  },
})

参考文档地址：https://github.com/wechat-miniprogram/miniprogram-component-plus/blob/master/docs/index-list.md