微信小程序中如何實(shí)現(xiàn)下拉列表

這篇文章主要介紹微信小程序中如何實(shí)現(xiàn)下拉列表，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái)，先為梅列等服務(wù)建站，梅列等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為梅列企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

一、效果圖

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

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

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

三、源碼

實(shí)現(xiàn)比較簡(jiǎn)單，代碼帶有必要的解釋?zhuān)芯筒毁樖隽?。如果有什么看不懂的，可以在評(píng)論區(qū)提問(wèn)，博主每天都會(huì)回復(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;
}
 
/* 下拉動(dòng)畫(huà) */
/* @keyframes Css3 新標(biāo)簽，循環(huán)動(dòng)畫(huà) */
@keyframes slidown{
 from{
  transform: translateY(-100%);
 }
 to{
  transform: translateY(0%);
 }
}
.slidown{
 display: block;
 animation: slidown .2s ease-in both;
}
 
/* 上拉動(dòng)畫(huà) */
@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)
 }
})

以上是“微信小程序中如何實(shí)現(xiàn)下拉列表”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：微信小程序中如何實(shí)現(xiàn)下拉列表
網(wǎng)頁(yè)網(wǎng)址：http://www.muchs.cn/article28/jpjijp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站導(dǎo)航、網(wǎng)站營(yíng)銷(xiāo)、云服務(wù)器、網(wǎng)站策劃、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)