小程序有时需要使用下拉框选项,通常我会使用 picker 组件实现。pick 组件使用 mode 来区分类别,默认使用普通选择器就行。
除了上述方式,我们也可以通过自定义组件实现,代码如下:
//index.js Component({ /** * 组件的属性列表 */ properties: { propArray: { type: Array, } }, /** * 组件的初始数据 */ data: { selectShow: false,//初始option不显示 selectText: "请选择",//初始内容 }, /** * 组件的方法列表 */ methods: { //option的显示与否 selectToggle: function () { var nowShow = this.data.selectShow;//获取当前option显示的状态 this.setData({ selectShow: !nowShow }) }, //设置内容 setText: function (e) { var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties var nowIdx = e.target.dataset.index;//当前点击的索引 var nowText = nowData[nowIdx].text || nowData[nowIdx].value || nowData[nowIdx];//当前点击的内容 //再次执行动画,注意这里一定,一定,一定是this.animation来使用动画 this.setData({ selectShow: false, selectText: nowText, }) this.triggerEvent('select', nowData[nowIdx]) } } })
代码如下:
{{selectText}} {{item.text || item.value || item}}
样式实现:
/* components/single-dropdown-select/index.wxss */ .ms-content-box { width: 120px; } .ms-content { border: 1px solid #e2e2e2; background: white; font-size: 16px; position: relative; height: 30px; line-height: 30px; } .ms-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 40px 0 6px; font-size: 14px; } .ms-options { background: white; width: inherit; position: absolute; border: 1px solid #e2e2e2; border-top: none; box-sizing: border-box; z-index: 3; max-height: 120px; overflow: auto; } .ms-option { height: 30px; line-height: 30px; border-top: 1px solid #e2e2e2; padding: 0 6px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .ms-item:first-child { border-top: none; } .icon-right, .icon-down, .icon-up { display: inline-block; padding-right: 13rpx; position: absolute; right: 20rpx; top: 10rpx; } .icon-right::after, .icon-down::after, .icon-up::after { content: ""; display: inline-block; position: relative; bottom: 2rpx; margin-left: 10rpx; height: 10px; width: 10px; border: solid #bbb; border-width: 2px 2px 0 0; } .icon-right::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .icon-down::after { bottom: 14rpx; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .icon-up::after { bottom: 0rpx; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
如何使用呢?首先在引用组件的页面,引入组件:
{ "usingComponents": { "single-dropdown-select": "/components/single-dropdown-select/index" } }
在页面中,直接使用 引入的组件,代码如下:
同时传入数据和监听子组件向父组件传递的 select 方法。
Page({ data: { selectArray: [{ "id": "10", "value": "会计类" }, { "id": "21", "text": "工程类" }, '技术类', {'value': '其他'}] }, select: function(e) { console.log(e.detail) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。