一、效果圖

二、實(shí)現(xiàn)原理

跟網(wǎng)頁的下拉列表實(shí)現(xiàn)是一樣的，剛剛開始默認(rèn)下拉的內(nèi)容的是不顯示的（display:none），然后通過點(diǎn)擊的時(shí)候，去更改 display 的屬性值，來實(shí)現(xiàn)下拉的效果。然后下拉的動畫的通過 css3 的 animation 來實(shí)現(xiàn)的。

CSS3中添加的新屬性 animation 是用來為元素實(shí)現(xiàn)動畫效果的，但是animation無法單獨(dú)擔(dān)當(dāng)起實(shí)現(xiàn)動畫的效果。承載動畫的另一個(gè)屬性 —— @keyframes。使用的時(shí)候?yàn)榱思嫒菘杉由?webkit-、-o-、-ms-、-moz-、-khtml-等前綴以適應(yīng)不同的瀏覽器。

三、源碼

實(shí)現(xiàn)比較簡單，代碼帶有必要的解釋，所有就不贅述了。如果有什么看不懂的，可以在評論區(qū)提問，博主每天都會回復(fù)的。

index.wxml

<!--page/one/index.wxml-->
<view class="page">
 <view class="nav-son" bindtap="listpx">
 <view>我的下拉列表</view>
 <image src='{{imgUrl}}'></image>
 </view>
 
 <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">
 <view wx:for="{{content}}">
 {{item}}
 </view>
 </view>
</view>
<button>按鈕</button>

index.wxss

/* 下拉列表的樣式 */
.nav-son{
 position: relative;
 /* 讓下拉提示信息永遠(yuǎn)放于下拉內(nèi)容的上面 */
 z-index: 99;
 border-top: 1px solid #d1d3d4;
 border-bottom: 1px solid #d1d3d4;
 background: #fff;
 display: flex;
 height: 40px;
 align-items:center;
 font-size: 18px;
}
/* 下拉列表 下三角的樣式 */
.nav-son image{
 position: absolute;
 right: 30rpx;
 width: 50rpx;
 height: 50rpx;
}
 
/* 下拉框的樣式 */
.temp{
 /* 默認(rèn)為不顯示 */
 display:none;
 /* 下拉框的寬度， */
 width: 100%;
 /* 下拉框的最大高度 */
 max-height: 750rpx;
 overflow-y: scroll;
 padding: 0 0 0 20rpx;
 line-height:100rpx;
 background: #fff;
}
 
/* 下拉框內(nèi)容的樣式 */
.temp view{
 border-bottom: 1px solid #d1d3d4;
 font-size: 14px;
 color: #666;
}
 
/* 下拉動畫 */
/* @keyframes Css3 新標(biāo)簽，循環(huán)動畫 */
@keyframes slidown{
 from{
 transform: translateY(-100%);
 }
 to{
 transform: translateY(0%);
 }
}
.slidown{
 display: block;
 animation: slidown .2s ease-in both;
}
 
/* 上拉動畫 */
@keyframes slidup{
 from{
 transform: translateY(0%);
 }
 to{
 transform: translateY(-100%);
 }
}
.slidup{
 display: block;
 animation: slidup .2s ease-in both;
 height: 0px;
}

index.js

Page({
 data: {
 content: [],
 px: [],
 pxopen: false,
 pxshow: false,
 active:true,
 imgUrl: "../../images/down.png"
 },
 onLoad: function() {
 this.setData({
 px: ['>默認(rèn)排序', '>離我最近']
 })
 },
 listpx: function(e) {
 console.log(e)
 if (this.data.pxopen) {
 this.setData({
 pxopen: false,
 pxshow: false,
 active: true,
 imgUrl: "../../images/down.png"
 })
 } else {
 this.setData({
 content: this.data.px,
 pxopen: true,
 pxshow: false,
 active:false,
 imgUrl: "../../images/up.png"
 })
 }
 console.log(e.target)
 }
})

四、項(xiàng)目下載

https://github.com/yyzheng1729/menudown

五、同類文章推薦

微信小程序 授權(quán)登錄詳解（附完整源碼）

微信小程序之側(cè)邊欄滑動實(shí)現(xiàn)過程解析（附完整源碼）