微信小程序下拉框組件使用方法

第微信小程序下拉框組件使用方法小程序有時(shí)需要使用下拉框選項(xiàng)，通常我會(huì)使用picker組件實(shí)現(xiàn)。pick組件使用mode來(lái)區(qū)分類(lèi)別，默認(rèn)使用普通選擇器就行。

除了上述方式，我們也可以通過(guò)自定義組件實(shí)現(xiàn)，代碼如下：

//index.js

Component({

/**

*組件的屬性列表

*/

properties:{

propArray:{

type:Array,

}

/**

*組件的初始數(shù)據(jù)

*/

data:{

selectShow:false,//初始o(jì)ption不顯示

selectText:"請(qǐng)選擇",//初始內(nèi)容

/**

*組件的方法列表

*/

methods:{

//option的顯示與否

selectToggle:function(){

varnowShow=this.data.selectShow;//獲取當(dāng)前option顯示的狀態(tài)

this.setData({

selectShow:!nowShow

})

},

//設(shè)置內(nèi)容

setText:function(e){

varnowData=pArray;//當(dāng)前option的數(shù)據(jù)是引入組件的頁(yè)面?zhèn)鬟^(guò)來(lái)的，所以這里獲取數(shù)據(jù)只有通過(guò)perties

varnowIdx=e.target.dataset.index;//當(dāng)前點(diǎn)擊的索引

varnowText=nowData[nowIdx].text||nowData[nowIdx].value||nowData[nowIdx];//當(dāng)前點(diǎn)擊的內(nèi)容

//再次執(zhí)行動(dòng)畫(huà)，注意這里一定，一定，一定是this.animation來(lái)使用動(dòng)畫(huà)

this.setData({

selectShow:false,

selectText:nowText,

})

this.triggerEvent('select',nowData[nowIdx])

}

})

代碼如下：

view

viewbindtap='selectToggle'

view{{selectText}}/view

viewclass="{{selectShow'icon-up':'icon-down'}}"/view

/view

viewwx:if="{{selectShow}}"

viewwx:for="{{propArray}}"data-index="{{index}}"wx:key='index'bindtap='setText'{{item.text||item.value||item}}/view

/view

/view

樣式實(shí)現(xiàn)：

/*components/single-dropdown-select/index.wxss*/

.ms-content-box{

width:120px;

.ms-content{

border:1pxsolid#e2e2e2;

background:white;

font-size:16px;

position:relative;

height:30px;

line-height:30px;

.ms-text{

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

padding:040px06px;

font-size:14px;

.ms-options{

background:white;

width:inherit;

position:absolute;

border:1pxsolid#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:1pxsolid#e2e2e2;

padding:06px;

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:2px2px00;

.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);

}

如何使用呢？首先在引用組件的頁(yè)面，引入組件：

{

"usingComponents":{

"single-dropdown-select":"/components/single-dropdown-select/index"

}

在頁(yè)面中，直接使用引入的組件，代碼如下：

view

single-dropdown-selectprop-array='{{selectArray}}'bind:select='select'/

/view

同時(shí)傳入數(shù)據(jù)和監(jiān)聽(tīng)子組件向父組件傳遞的select方法。

Page({

data:{

selectArray:[{

"id":"10",

"value":"會(huì)計(jì)類(lèi)"