微信小程序如何實(shí)現(xiàn)slideUp、slideDown滑動效果及點(diǎn)擊空白隱藏功能

這篇文章給大家分享的是有關(guān)微信小程序如何實(shí)現(xiàn)slideUp、slideDown滑動效果及點(diǎn)擊空白隱藏功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

10余年的尖草坪網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整尖草坪建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“尖草坪網(wǎng)站設(shè)計”,“尖草坪網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

怎樣實(shí)現(xiàn)jq中的slideUp或者slideDown這種動畫效果呢，我的思路是用css3的transform: translateY() 屬性，給需要動畫的元素添加上一個動畫class。

先上效果圖：

1.蒙層的結(jié)構(gòu)：

<!-- 購物車蒙層 -->
<view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'>     <!--mengShow是蒙層是否顯示的標(biāo)志，然后蒙層綁定outbtn的點(diǎn)擊事件-->
  <view class='in-list {{aniStyle?"slideup":"slidedown"}}' catchtap='inbtn'>  <!--這里的三元運(yùn)算符是判斷動畫該執(zhí)行哪一種，catchtap這個是阻止冒泡的點(diǎn)擊事件，這個事件必須有，才能阻止冒泡 -->
    <view class='in-content'>
      <text>已選商品（1）</text>
      <text class='iconfont icon-6'>清空購物車</text>
    </view>
    <view class='cho-list' wx:for="{{chooseList}}" wx:key="">
      <view class='listName'>{{item.Cname}}</view>
      <view class='listPrice'>￥{{item.Cprice}}</view>
      <view class='opBtn'>
        <view class='com-btn cuts' >-</view>
        <view class='com-num'>{{item.Cnum}}</view>
        <view class='com-btn add' >+</view>
      </view>
    </view>
  </view>
</view>

注意：三元運(yùn)算符里的slideup和slidedown一定要加上引號

2.蒙層的其它樣式自己寫。最主要的是slideup和slidedown的動畫效果的樣式：

@keyframes slidedown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
.slidedown {
  animation: slidedown 0.5s linear ;
}
.slideup {
  animation: slideup 0.5s linear ;
}
@keyframes slideup {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

其它的樣式：list-fix是fixed定位，而in-list是absolute定位。

需要注意的一點(diǎn)是：做的時候，是從Y軸100%的位置處即最底部開始運(yùn)動或是從0到100%，所以要設(shè)置z-index，才能實(shí)現(xiàn)在底部運(yùn)動起來的時候或者回到100%即底部的時候，蒙層浮在“確認(rèn)下單”這整個結(jié)構(gòu)的下面。即“確認(rèn)下單”這整個結(jié)構(gòu)的z-index要大于蒙層的z-index。

3.js

page({
  data: {
    mengShow:false,//蒙層的顯示與否
   aniStyle:true,  //動畫效果，默認(rèn)slideup
  },
  //蒙層的顯示
  showMeng:function(e){     //這是“確認(rèn)下單”這整個購物車導(dǎo)航欄的點(diǎn)擊事件
    this.setData({
      mengShow:true,      //蒙層顯示
      aniStyle:true//設(shè)置動畫效果為slideup
    })
  },
  outbtn:function(e){      //這是list-fix的點(diǎn)擊事件，給它綁定事件，是為了實(shí)現(xiàn)點(diǎn)擊其它地方隱藏蒙層的效果
    var that=this;
    this.setData({
      aniStyle:false//設(shè)置動畫效果為slidedown
    })
    setTimeout(function(){    //延時設(shè)置蒙層的隱藏，這個定時器的時間，就是slidedown在css動畫里設(shè)置的時間，這樣就能實(shí)現(xiàn)slidedown動畫完成后，蒙層才消失的效果。不設(shè)置定時器會導(dǎo)致動畫效果看不見
      that.setData({
        mengShow: false
      })
    },500)
  },
  inbtn:function(e){     //這個事件必須有，就算不做什么事情也要寫上去，因?yàn)檫@個事件是為了防止事件冒泡，導(dǎo)致點(diǎn)擊in-list這里面的元素時，點(diǎn)擊事件冒泡到list-fix觸發(fā)它的slidedown事件。
    console.log("in")
  },
})

這樣就能實(shí)現(xiàn)slidedown和slideup，點(diǎn)擊其它地方隱藏某元素的功能了。

感謝各位的閱讀！關(guān)于“微信小程序如何實(shí)現(xiàn)slideUp、slideDown滑動效果及點(diǎn)擊空白隱藏功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞名稱：微信小程序如何實(shí)現(xiàn)slideUp、slideDown滑動效果及點(diǎn)擊空白隱藏功能
瀏覽路徑：http://muchs.cn/article42/ihjphc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、定制網(wǎng)站、網(wǎng)站改版、微信公眾號、微信小程序、網(wǎng)站導(dǎo)航

廣告

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