微信小程序自定義select下拉選項框的方法

第微信小程序自定義select下拉選項框的方法本文實例為大家分享了微信小程序自定義select下拉選項框的具體代碼，供大家參考，具體內(nèi)容如下

第一步：創(chuàng)建組件所需的文件

第二步：開始配置組件

select.json

{

"component":true,

"usingComponents":{

"select":"./select"

}

第三步：自定義組件樣式及js

select.wxml

view

viewbindtap='selectToggle'

view{{nowText}}/view

imagesrc='../../public/image/index/jinru1@2x.png'

animation="{{animationData}}"/image

/view

viewwx:if="{{selectShow}}"

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

/view

/view

select.wxss

.com-selectBox{

width:200px;

.com-sContent{

border:1pxsolid#e2e2e2;

background:white;

font-size:16px;

position:relative;

height:30px;

line-height:30px;

.com-sImg{

position:absolute;

right:10px;

top:11px;

width:16px;

height:9px;

transition:all.3sease;

.com-sTxt{

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

padding:020px06px;

font-size:14px;

.com-sList{

background:white;

width:inherit;

position:absolute;

border:1pxsolid#e2e2e2;

border-top:none;

box-sizing:border-box;

z-index:3;

max-height:120px;

overflow:auto;

.com-sItem{

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;

.com-sItem:first-child{

border-top:none;

}

select.js

Component({

/**

*組件的屬性列表

*/

properties:{

propArray:{

type:Array,

}

/**

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

*/

data:{

selectShow:false,//初始option不顯示

nowText:"請選擇",//初始內(nèi)容

animationData:{}//右邊箭頭的動畫

/**

*組件的方法列表

*/

methods:{

//option的顯示與否

selectToggle:function(){

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

//創(chuàng)建動畫

varanimation=wx.createAnimation({

timingFunction:"ease"

})

this.animation=animation;

if(nowShow){

animation.rotate(0).step();

this.setData({

animationData:animation.export()

})

}else{

animation.rotate(180).step();

this.setData({

animationData:animation.export()

})

}

this.setData({

selectShow:!nowShow

})

},

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

setText:function(e){

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

varnowIdx=e.target.dataset.index;//當前點擊的索引

varnowText=nowData[nowIdx].text;//當前點擊的內(nèi)容

//子組件觸發(fā)事件

varnowDate={

id:nowIdx,

text:nowText

}

this.triggerEvent('myget',nowDate)

//再次執(zhí)行動畫，注意這里一定，一定，一定是this.animation來使用動畫

this.animation.rotate(0).step();

this.setData({

selectShow:false,

nowText:nowText,

animationData:this.animation.export()

})

}

})

第四步：引入組件，傳入組件所需數(shù)據(jù)

1、引入組件的頁面的json文件中配置

{

"usingComponents":{

"Select":"../../components/select/select"

"navigationBarTitleText":""

}

2、引入組件的頁面的wxml文件中配置

bind:myget=getDate對組件的事件進行監(jiān)聽

Selectprop-array='{{selectArray}}'bind:myget='getDate'/Select

3、引入組件的頁面的js文件中配置

data:{

selectArray:[

{

"id":"01",

"text":"停車A區(qū)"