快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動(dòng)效果及點(diǎn)擊空白隱藏功能示例

更新時(shí)間：2018年12月11日 11:07:54 作者：站住，別跑

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動(dòng)效果及點(diǎn)擊空白隱藏功能,涉及微信小程序事件響應(yīng)、頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)滑動(dòng)與蒙層功能相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動(dòng)效果及點(diǎn)擊空白隱藏功能。分享給大家供大家參考，具體如下：

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

先上效果圖：

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

<!-- 購(gòu)物車(chē)蒙層 -->
<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)算符是判斷動(dòng)畫(huà)該執(zhí)行哪一種，catchtap這個(gè)是阻止冒泡的點(diǎn)擊事件，這個(gè)事件必須有，才能阻止冒泡 -->
    <view class='in-content'>
      <text>已選商品（1）</text>
      <text class='iconfont icon-6'>清空購(gòu)物車(chē)</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一定要加上引號(hào)

2.蒙層的其它樣式自己寫(xiě)。最主要的是slideup和slidedown的動(dòng)畫(huà)效果的樣式：

@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)是：做的時(shí)候，是從Y軸100%的位置處即最底部開(kāi)始運(yùn)動(dòng)或是從0到100%，所以要設(shè)置z-index，才能實(shí)現(xiàn)在底部運(yùn)動(dòng)起來(lái)的時(shí)候或者回到100%即底部的時(shí)候，蒙層浮在“確認(rèn)下單”這整個(gè)結(jié)構(gòu)的下面。即“確認(rèn)下單”這整個(gè)結(jié)構(gòu)的z-index要大于蒙層的z-index。

3.js

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

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

總結(jié)：

1.防止冒泡的點(diǎn)擊事件：catchtap=""

2.點(diǎn)擊父元素除子元素以外的其它地方隱藏父元素的方法：父元素綁定一個(gè)點(diǎn)擊隱藏事件，然后子元素綁定catchtap這種能阻止冒泡的事件

3.巧用定時(shí)器設(shè)置屬性值，可達(dá)到類(lèi)似上面執(zhí)行一個(gè)動(dòng)畫(huà)之后再執(zhí)行另外一個(gè)動(dòng)畫(huà)的方法。

希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。

您可能感興趣的文章: