小程序自定義下拉動(dòng)畫的實(shí)現(xiàn)方式

—— 2018 ——

01/17

00:00

來源：

作者：未知

欄目：小程序開發(fā)

2018/1/17 0:00:00 來源：不詳作者：未知

　　小程序中可以自定義設(shè)置實(shí)現(xiàn)下拉菜單帶動(dòng)畫，下面是實(shí)現(xiàn)這種形式的方法：

　　在pick-header里添加篩選項(xiàng)，在pick-container添加被篩選的選項(xiàng)內(nèi)容，content里顯示真正的內(nèi)容。

　　content的高度是會(huì)在js里根據(jù)當(dāng)前手機(jī)分辨率所動(dòng)態(tài)計(jì)算的，高度值為contentHeight，所以在里面可以嵌套一個(gè)scroll-view，設(shè)置高度為contentHeight即可實(shí)現(xiàn)內(nèi)容滑動(dòng)。

　　好了，廢話不多說，直接看圖附代碼。

下拉菜單示例.gif

wxml

<view class="content-container">

  <view class="pick-header" bindtap="onPickHeaderClick">

    篩選pick-header view z-index:60

  </view>

  <view class="pick-container {{needAnimation ? (openPicker ? 'slidown' : 'slidup') : ''}}" >

    篩選項(xiàng) pick-container view z-index:50

  </view>

  <view class="shadow" style="height:{{contentHeight}}px;line-height:{{contentHeight}}px" hidden="  {{!openPicker}}">我是半透明陰影遮罩 view shadow  z-index:40</view>

  <view class="content" style="height:{{contentHeight}}px">

    我是內(nèi)容content view z-index:20

  </view>

</view>

wxss

/*根布局*/

.content-container {

width: 100%;

position: absolute;

}

/*篩選頭部*/

.pick-header {

  width: 100%;

  height: 72rpx;

  z-index: 60;

  position: fixed;

 background-color: lightcoral;

}

/*篩選項(xiàng)容器布局*/

.pick-container {

  width: 100%;

  height: 300rpx;

  background-color: lightgoldenrodyellow;

  position: absolute;

  z-index: 50;

  top: -228rpx;

}

/*篩選項(xiàng)隱藏 顯示動(dòng)畫 start*/

@keyframes slidown {

  from {

    transform: translateY(0%);

  }

  to {

    transform: translateY(100%);

  }

}

.slidown {

  display: block;

  animation: slidown 0.1s ease-in both;

}

@keyframes slidup {

  from {

    transform: translateY(100%);

  }

  to {

    transform: translateY(0%);

  }

}

.slidup {

  display: block;

  animation: slidup 0.2s ease-in both;

}

/*篩選項(xiàng)隱藏 顯示動(dòng)畫 end*/

/*篩選項(xiàng)顯示出來的時(shí)候的陰影*/

.shadow {

  width: 100%;

  background-color: rgba(1, 1, 1, 0.2);

  position: absolute;

  z-index: 40;

  top: 72rpx;

}

/*內(nèi)容容器布局*/

.content {

  width: 100%;

  position: absolute;

  top: 72rpx;

  z-index: 20;

}

Page({

data: {

    openPicker: false,

    needAnimation : false,

    contentHeight: 0

},

onLoad: function () {

},

onReady: function () {

    var that = this;

    wx.getSystemInfo({

        success: function (res) {

            that.setData({

                //動(dòng)態(tài)根據(jù)手機(jī)分辨率來計(jì)算內(nèi)容的高度（屏幕總高度-頂部篩選欄的高度）

                contentHeight: (res.windowHeight - 72 * res.screenWidth / 750)

            });

        }

    })

},

onPickHeaderClick: function () {

    this.setData({

        openPicker: !this.data.openPicker,

        needAnimation : true

    })

  },

})

　　以上就是實(shí)現(xiàn)微信小程序下拉菜單(帶動(dòng)畫)的方法實(shí)例的詳細(xì)內(nèi)容，希望可以幫助到到大家。

【本站聲明】
1、本站文章中所選用的圖片及文字來源于網(wǎng)絡(luò)以及用戶投稿，由于未聯(lián)系到知識(shí)產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識(shí)產(chǎn)權(quán)的登記，如有知識(shí)產(chǎn)權(quán)人并不愿意我們使用，如果有侵權(quán)請(qǐng)立即聯(lián)系。
2、本網(wǎng)站不對(duì)文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé)，僅系客觀性描述，如您需要了解該類商品/服務(wù)詳細(xì)的資訊，請(qǐng)您直接與該類商品/服務(wù)的提供者聯(lián)系。

KESION 科汛軟件
KESION 科汛軟件是國(guó)內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商，長(zhǎng)期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺(tái)解決方案。
公司核心產(chǎn)品云開店SaaS社交電商服務(wù)平臺(tái)、在線教育SaaS服務(wù)平臺(tái)、教育企業(yè)數(shù)字化SaaS云平臺(tái)、企微營(yíng)銷助手、私有化獨(dú)立部署品牌網(wǎng)校和在線教育咨詢等。
KESION 不斷通過技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過科技驅(qū)動(dòng)商業(yè)革新，讓商業(yè)變得更智慧！

▼點(diǎn)擊進(jìn)入科汛官網(wǎng)了解更多

熱門標(biāo)簽

微信小程序

上/下篇

蘑菇街小程序電商直播小程序系統(tǒng)開發(fā)案例

科汛最新消息，蘑菇街自去年7月21日上線直播板塊，一個(gè)月內(nèi)人均播映次數(shù)已提升了40%，人均播映時(shí)長(zhǎng)提升了100%。順暢的邊看邊買體會(huì)，明顯也給高轉(zhuǎn)化做出了貢獻(xiàn)。蘑菇街的直播是...

社交電商小程序電商電商小程序電商直播微商 2018/1/17 0:00:00
社交立減金接口哪里設(shè)置（非支付渠道）

小程序社交立減金功能實(shí)現(xiàn)了商家快速獲取社交、裂變傳播屬性。那么在經(jīng)營(yíng)小程序時(shí)如何開放社交立減金接口呢。...

營(yíng)銷工具運(yùn)營(yíng)SaaS 2018/1/17 0:00:00