本篇內(nèi)容主要講解“微信小程序如何實(shí)現(xiàn)下拉選項(xiàng)框”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“微信小程序如何實(shí)現(xiàn)下拉選項(xiàng)框”吧!

效果圖

test.js

/**
*頁面的初始數(shù)據(jù)
*/
data:{
shows:false,//控制下拉列表的顯示隱藏，false隱藏、true顯示
selectDatas:['消費(fèi)賬戶','平臺(tái)返利賬戶','微信錢包'],//下拉列表的數(shù)據(jù)
indexs:0,//選擇的下拉列表下標(biāo),
},

//點(diǎn)擊下拉顯示框
selectTaps(){
this.setData({
shows:!this.data.shows,
});
},
//點(diǎn)擊下拉列表
optionTaps(e){
letIndexs=e.currentTarget.dataset.index;//獲取點(diǎn)擊的下拉列表的下標(biāo)
console.log(Indexs)
this.setData({
indexs:Indexs,
shows:!this.data.shows
});

},

test.wxml

<viewclass='fenlei'>
<text>地址</text>
<!--下拉框-->
<viewclass='select_box'>
<viewclass='select'catchtap='selectTaps'>
<textclass='select_text'>{{selectDatas[indexs]}}</text>
<!--<imageclass='words_img'src='../../images/sanjiao.png'></image>-->
<imageclass='select_img{{shows&&"select_img_rotate"}}'src='../../images/sanjiao.png'></image>
</view>
<viewclass='option_box'style='height:{{shows?(selectDatas.length>5?300:selectDatas.length*60):0}}rpx;'>
<textclass='option'style='{{indexs==selectDatas.length-1&&"border:0;"}}'wx:for='{{selectDatas}}'wx:key='this'data-index='{{index}}'catchtap='optionTaps'>{{item}}</text>
</view>
</view>
</view>

test.wxss

/*fenlei*/
.fenlei{
margin:025rpx;
height:90rpx;
line-height:90rpx;
border-bottom:1rpxsolid#e6e6e6;
display:flex;
align-items:center;
}
.fenleitext{
font-size:30rpx;
color:#999999;
margin-left:15rpx;
}
/*下拉框*/
.select_box{
background:#fff;
width:620rpx;
/*margin:0auto;*/
height:90rpx;
line-height:90rpx;
text-align:left;
position:relative;
}

.select{
box-sizing:border-box;
width:100%;
height:86rpx;
/*border:1pxsolid#efefef;*/
border-radius:8rpx;
display:flex;
align-items:center;
padding:020rpx;
}

.select_text{
font-size:28rpx;
flex:1;
color:rgb(102,102,102);
line-height:86rpx;
height:86rpx;
}

.select_img{
width:40rpx;
height:40rpx;
display:block;
transition:transform0.3s;
}

.select_img_rotate{
transform:rotate(180deg);
}

.option_box{
position:absolute;
top:86rpx;
width:100%;
/*border:1pxsolid#efefef;*/
box-sizing:border-box;
height:0;
overflow-y:auto;
border-top:0;
background:#fff;
transition:height0.3s;
z-index:100;
}

.option{
display:block;
line-height:40rpx;
font-size:28rpx;
border-bottom:1pxsolid#efefef;
padding:10rpx;
color:rgb(102,102,102);
}

總結(jié)

以上是生活随笔為你收集整理的微信小程序如何实现下拉选项框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。