微信小程序之下拉列表實現方法解析（附完整源碼）

這篇文章主要介紹了微信小程序之下拉列表實現方法解析（附完整源碼）,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

一、效果圖

二、實現原理

跟網頁的下拉列表實現是一樣的，剛剛開始默認下拉的內容的是不顯示的（display:none），然後通過點擊的時候，去更改 display 的屬性值，來實現下拉的效果。然後下拉的動畫的通過 css3 的 animation 來實現的。

CSS3中添加的新屬性 animation 是用來爲元素實現動畫效果的，但是animation無法單獨擔當起實現動畫的效果。承載動畫的另一個屬性 —— @keyframes。使用的時候爲了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前綴以適應不同的瀏覽器。

三、源碼

實現比較簡單，代碼帶有必要的解釋，所有就不贅述了。如果有什麼看不懂的，可以在評論區提問，博主每天都會回覆的。

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;
 /* 讓下拉提示信息永遠放於下拉內容的上面 */
 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{
 /* 默認爲不顯示 */
 display:none;
 /* 下拉框的寬度， */
 width: 100%;
 /* 下拉框的最大高度 */
 max-height: 750rpx;
 overflow-y: scroll;
 padding: 0 0 0 20rpx;
 line-height:100rpx;
 background: #fff;
}
 
/* 下拉框內容的樣式 */
.temp view{
 border-bottom: 1px solid #d1d3d4;
 font-size: 14px;
 color: #666;
}
 
/* 下拉動畫 */
/* @keyframes Css3 新標籤，循環動畫 */
@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: ['>默認排序', '>離我最近']
  })
 },
 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)
 }
})

四、項目下載

https://github.com/yyzheng1729/menudown

五、同類文章推薦

微信小程序 授權登錄詳解（附完整源碼）

微信小程序之側邊欄滑動實現過程解析（附完整源碼）

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。