微信小程序挑选下拉框组件功能

一、源码地址

https://github.com/imxiaoer/WeChatMiniSelect

二、效果图

录屏图片质量较差，所以大家会看到残影（捂脸)

三、组件源码

1.select.wxml

view class=' select-box ' view class=' select-current ' catch tap=' openClose ' text class=' current-name ' { current。name } }/text/view view class=' option-list ' wx : if=' { { isShow } } ' catch tap=' option tap ' text class=' option ' data-id=' { { default option。id } } ' data-name=' { {默认选项。name } } ' { {默认选项。name } }/text class=' option ' ww '说明：用捕捉龙头而不用bindtap是为了阻止事件冒泡，为了实现点击页面其他地方关闭选择，所以在父页面(index.wxml)最外层绑定了bindtap="关闭"方法，不阻止冒泡的话会执行父组件的关闭方法

2.select.js

组件({ properties : { options : { type : Array，value: [] }))，default options : { type : Object，value: { id: '000 '，name: '全部城市} }，key: { type: String，value: 'id' }，text: { type: String，value: 'name' }，data: { result: []，isShow: false，current : } }，methods 3: { option tap(e){ let dataset=e . target。数据集。({当前：数据集，isShow//调用父组件方法，并传参this.triggerEvent('change '，{ 0.dataset }) }，openClose(){ this。setdata({ isshow :this.data.isShow }) }，//此方法供父组件调用close(){ this。setdata({ isshow : false })}，life times : { attended(){//属性名称转换，如果不是{ id: ' '，名称：'' }格式，则转为{ id: ' '，名称：'' }格式让结果=[] if (this.data.key！=='id' || this.data.text！==' name '){ for(let item of this。数据。options){ let {[this。数据。键]: id，[这个。数据。text]: name }=项目结果。推送({ id，name })} }此。setdata({ current 3360对象。assign({ }，this.data.defaultOption)，result 3360 result })})说明：属性中的键和文本是为了做属性名转换。比如我现在的数据结构如下：

[{ city_id: '001 '，city_name: '北京}，{ city_id: '002 '，city_name: '上海}，{ city_id: '003 '，city_name: '深圳' }]而挑选组件要求的数据结构是：

[{ id: '001 '，名称： '北京}，{ id: '002 '，名称： '上海}，{ id: '003 '，名称： '深圳'}]因此我们就要将城市编号转换成id，城市名转换成名字。怎么实现属性名转换呢？就是通过键和文本这两个参数。

3.select.json

{ 'component': true，' usingComponents': {}}4 .select.wxss。选择框{位置：相对；宽度： 100%;font-size : 30 rpx}.选择-当前{位置：相对；宽度： 100%;padding: 0 10rpx线高： 70 rpxborder: 1rpx固体# dddb order-radius : 6rpx；盒子尺寸：边框盒子；}.{绝对位置： }后的选择-当前3360:显示器：块；right : 16 rpxtop : 30 rpxcontent : " "；宽度： 0;高度： 0;border: 10rpx固体透明；边框-top: 10rpx实心# 999;}.当前名称{显示：块；宽度： 85%;高度： 100%;单词包装：正常；飞越：隐藏；}.option-list { position :绝对值；左： 0；top: 76rpx宽度： 100%;padd : 12 rpx 20 rpx 10 rpx 20 rpx边界半径： 6rpx盒子尺寸：边框盒子；z指数： 99；箱形阴影： 0rpx 0rpx 1rpx 1rpx rgba(0，0，0，0.2)插图；背景-color : # fff；}.选项{显示：块；宽度： 100%;线高： 70 rpx边框-底部： 1rpx实心# eee}。选项：最后一个子{边框-底部：无；填充-底部： 0；}四、组件的使用

index.wxml

view class=' container ' bind tap=' close ' view class=' select-wrap ' select id=' select ' options=' { { options } } ' key=' city _ id ' text=' city _ name ' bind : change=' change '/select/view/view总结

以上所述是小编给大家介绍的微信小程序挑选下拉框组件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！