本篇內容主要講解“微信小程序如何實現下拉選項框”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“微信小程序如何實現下拉選項框”吧!

效果圖

test.js

/**
*頁面的初始數據
*/
data:{
shows:false,//控制下拉列表的顯示隱藏，false隱藏、true顯示
selectDatas:['消費賬戶','平臺返利賬戶','微信錢包'],//下拉列表的數據
indexs:0,//選擇的下拉列表下標,
},

//點擊下拉顯示框
selectTaps(){
this.setData({
shows:!this.data.shows,
});
},
//點擊下拉列表
optionTaps(e){
letIndexs=e.currentTarget.dataset.index;//獲取點擊的下拉列表的下標
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);
}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。