快捷導(dǎo)航

微信小程序之下拉列表實(shí)現(xiàn)方法解析（附完整源碼）

更新時間：2019年08月23日 14:29:51 作者：csdn_小東

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

一、效果圖

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

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

CSS3中添加的新屬性 animation 是用來為元素實(shí)現(xiàn)動畫效果的，但是animation無法單獨(dú)擔(dān)當(dāng)起實(shí)現(xiàn)動畫的效果。承載動畫的另一個屬性 —— @keyframes。使用的時候?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)過程解析（附完整源碼）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: