微信小程序?qū)崿F(xiàn)select下拉框

第微信小程序?qū)崿F(xiàn)select下拉框本文實例為大家分享了微信小程序?qū)崿F(xiàn)select下拉框的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)代碼如下：

view

!--下拉框--

view

viewcatchtap="selectTaps"

text{{selectDatas[indexs]}/text

imageclass="select_img:{{shows'select_img_rotate'}}"

src="../../../static/img/lifeCircle/arroundServe/xiala.png"/image

/view

view

textwx:for="{{selectDatas}}"wx:key="this"data-index="{{index}}"catchtap="optionTaps"

style="{{indexs==selectDatas.length-1'border:0;'}}"{{item}}/text

/view

/view

/view

css:

/*fenlei*/

.fenlei{

margin:025rpx;

height:80rpx;

line-height:80rpx;

display:flex;

align-items:center;

background-color:#F5F6F7;

.fenleitext{

font-size:30rpx;

color:#999999;

margin-left:15rpx;

/*下拉框*/

.select_box{

width:100%;

text-align:left;

position:relative;

.select{

box-sizing:border-box;

width:100%;

border-radius:8rpx;

display:flex;

align-items:center;

padding:020rpx;

.select_text{

font-size:32rpx;

flex:1;

color:#999999;

.select_img{

width:37rpx;

height:30rpx;

display:block;

transition:transform0.3s;

.select_img_rotate{

transform:rotate(180deg);

.option_box{

position:absolute;

width:100%;

box-sizing:border-box;

border-top:0;

background:#fff;

z-index:100;

text-align:center;

transition:height0.3s;

overflow-y:auto;

.option-list{

display:block;

line-height:106rpx;

font-size:32rpx;

border-bottom:1pxsolid#efefef;

padding:10rpx;

color:rgb(102,102,102);

cursor:pointer;

}

js:

/**

*頁面的初始數(shù)據(jù)

*/

data:{

shows:false,//控制下拉列表的顯示隱藏，false隱藏、true顯示

selectDatas:['再生資源回收點','家政服務(wù)點','綜合超市','生鮮超市','郵政快遞綜合服務(wù)點','維修點','照相文印店','美容美發(fā)店'],//下拉列表的數(shù)據(jù)

indexs:0,//選擇的下拉列表下標(biāo),

//點擊下拉顯示框

selectTaps(e){

console.log(e)

this.setData({

shows:!this.data.shows,

});

//點擊下拉列表

optionTaps(e){

letIndexs=e.currentTarget.dataset.index;//獲取點擊的下拉列表的下標(biāo)

console.log(Indexs)

this.setData({

indexs:Indexs,

shows:!this.data.