一款灵活好看的微信小程序行业二级联动选择器
一款灵活好看的微信小程序行业二级联动选择器
wx-second-list使用前提:
使用效果使用此组件需要依赖小程序基础库 2.2.1 或以上、及开发者工具 1.02.1808300 或以上,同时依赖开发者工具的 npm 构建。具体详情可查阅微信小程序 npm 支持文档。
使用方法 安装 wx-second-listPS:若想要获得上图中的效果,可参考 test/demo 中的例子实现。
npm install --save wx-second-list
在需要使用 wx-second-list 的页面 page.json 中添加 wx-second-list 自定义组件配置
{ "usingComponents": { "secondList": "wx-second-list" } } WXML 文件中引用 wx-second-list
<button bindtap="showSecond">弹出行业选择</button> <secondList id="second" bind:chooseEvent = "chooseItem"></secondList> 在调用wx-second-list的页面page.js添加事件,可参考 test/demo/pages/index/index.js 中的例子。
Page({
data: {},
onReady(){ this.second = this.selectComponent("#second")},
showSecond() { this.second.showSecond()},
chooseItem(e){ console.log('用户选择了'+e.detail) }
})
secondList的属性介绍如下:
属性名 | 类型 | 默认值 | 是否必须 | 说明 |
---|---|---|---|---|
id | String | 无 | 是 | 组件的id |
topText | String | 请选择所属行业 | 否 | 选择器最上方的文字说明 |
list | Array | 点击src/index.js查看 | 否 | 选择器的内容,如果需要使用该属性,必须按照src/index.js的格式 |
如有不当或需改进之处,请君指出,感谢万分!!!
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。