温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序如何实现slideUp、slideDown滑动效果及点击空白隐藏功能

发布时间:2021-06-26 13:55:56 来源:亿速云 阅读:156 作者:小新 栏目:web开发

这篇文章给大家分享的是有关微信小程序如何实现slideUp、slideDown滑动效果及点击空白隐藏功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY() 属性,给需要动画的元素添加上一个动画class。

先上效果图:

微信小程序如何实现slideUp、slideDown滑动效果及点击空白隐藏功能

1.蒙层的结构:

<!-- 购物车蒙层 -->
<view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'>     <!--mengShow是蒙层是否显示的标志,然后蒙层绑定outbtn的点击事件-->
  <view class='in-list {{aniStyle?"slideup":"slidedown"}}' catchtap='inbtn'>  <!--这里的三元运算符是判断动画该执行哪一种,catchtap这个是阻止冒泡的点击事件,这个事件必须有,才能阻止冒泡 -->
    <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>

注意:三元运算符里的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定位。

需要注意的一点是:做的时候,是从Y轴100%的位置处即最底部开始运动或是从0到100%,所以要设置z-index,才能实现在底部运动起来的时候或者回到100%即底部的时候,蒙层浮在“确认下单”这整个结构的下面。即“确认下单”这整个结构的z-index要大于蒙层的z-index。

3.js

page({
  data: {
    mengShow:false,//蒙层的显示与否
   aniStyle:true,  //动画效果,默认slideup
  },
  //蒙层的显示
  showMeng:function(e){     //这是“确认下单”这整个购物车导航栏的点击事件
    this.setData({
      mengShow:true,      //蒙层显示
      aniStyle:true//设置动画效果为slideup
    })
  },
  outbtn:function(e){      //这是list-fix的点击事件,给它绑定事件,是为了实现点击其它地方隐藏蒙层的效果
    var that=this;
    this.setData({
      aniStyle:false//设置动画效果为slidedown
    })
    setTimeout(function(){    //延时设置蒙层的隐藏,这个定时器的时间,就是slidedown在css动画里设置的时间,这样就能实现slidedown动画完成后,蒙层才消失的效果。不设置定时器会导致动画效果看不见
      that.setData({
        mengShow: false
      })
    },500)
  },
  inbtn:function(e){     //这个事件必须有,就算不做什么事情也要写上去,因为这个事件是为了防止事件冒泡,导致点击in-list这里面的元素时,点击事件冒泡到list-fix触发它的slidedown事件。
    console.log("in")
  },
})

这样就能实现slidedown和slideup,点击其它地方隐藏某元素的功能了。

感谢各位的阅读!关于“微信小程序如何实现slideUp、slideDown滑动效果及点击空白隐藏功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI