手机版

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

时间:2021-08-20 来源:互联网 编辑:宝哥软件园 浏览:

一、源码地址

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总结

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

版权声明:微信小程序挑选下拉框组件功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。