微信小程序下拉框组件运用方法

小程序中自定义下拉框实现方法

在小程序开发项目中，有时会需要使用下拉框选项。通常使用picker组件实现，但是还有另一种方法：使用自定义组件来实现。下面是实现代码：

微信小程序下拉框组件运用方法

//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])
}
})

实现样式代码如下：

/* 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"
}
}

在页面中直接使用组件：

<view>
<single-dropdown-select prop-array='{{selectArray}}' bind:select='select' />
</view>

同时传入数据并监听子组件向父组件传递的select方法。

结尾

以上是关于小程序中自定义下拉框实现方法的介绍，希望对大家有所帮助。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7236.html

微信小程序下拉框组件运用方法

小程序中自定义下拉框实现方法

结尾

相关推荐