【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序?qū)崿F(xiàn)下拉框效果的案例

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序?qū)崿F(xiàn)下拉框效果的案例

這篇文章主要介紹微信小程序?qū)崿F(xiàn)下拉框效果的案例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！微信小程序組件里沒(méi)有下拉框，正好要用到，記下來(lái)以后參考wxml代碼：<view

class='top'>

<view

class='top-text'>

選擇接收班級(jí)</view>

<!--

下拉框

-->

<view

class='top-selected'

bindtap='bindShowMsg'>

<text>{{grade_name}}</text>

<image

src='/images/icon/down.png'></image>

</view>

<!--

下拉需要顯示的列表

-->

<view

class="select_box"

wx:if="{{select}}">

<view

wx:for="{{grades}}"

wx:key="unique">

<view

class="select_one"

bindtap="mySelect"

data-name="{{item}}">{{item}}</view>

</view>

</view>

</view>wxss代碼：/*

頂部

*/.top{

width:

100vw;

height:

80rpx;

padding:

0

20rpx;

line-height:

80rpx;

font-size:

34rpx;

border-bottom:

1px

solid

#000;

}.top-text{

float:

left}/*

下拉框

*/.top-selected{

width:

50%;

display:

flex;

float:

right;

align-items:

center;

justify-content:

space-between;

border:

1px

solid

#ccc;

padding:

0

10rpx;

font-size:

30rpx;

}/*

下拉內(nèi)容

*/.select_box

{

background-color:

#fff;

padding:

0

20rpx;

width:

50%;

float:

right;

position:

relative;

right:

0;

z-index:

1;

overflow:

hidden;

text-align:

left;

animation:

myfirst

0.5s;

font-size:

30rpx;

}.select_one

{

padding-left:

20rpx;

width:

100%;

height:

60rpx;

position:

relative;

line-height:

60rpx;

border-bottom:

1px

solid

#ccc;

}/*

下拉過(guò)度效果

*/@keyframes

myfirst

{

from

{

height:

0rpx;

}

to

{

height:

210rpx;

}}/*

下拉圖標(biāo)

*/.top-selected

image{

height:50rpx;

width:50rpx;

position:

absolute;

right:

0rpx;

top:

20rpx;

}js代碼：

/**

*

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

*/

data:

{

select:false,

grade_name:'--請(qǐng)選擇--',

grades:

[

'猛犸機(jī)器人1班',

'猛犸機(jī)器人2班',

'口才1班',

]

},/**

*

點(diǎn)擊下拉框

*/

bindShowMsg()

{

this.setData({

select:

!this.data.select

})

},/**

*

已選下拉框

*/

mySelect(e)

{

console.log(e)

var

name

=

e.cur