微信小程序实现点击空白隐藏

た入场券 2022-03-08 02:50 474阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]  
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，点击其它地方隐藏某元素的功能了。

总结：1.防止冒泡的点击事件：catchtap=“”  
　　2.点击父元素除子元素以外的其它地方隐藏父元素的方法：父元素绑定一个点击隐藏事件，然后子元素绑定catchtap这种能阻止冒泡的事件

3.巧用定时器设置属性值，可达到类似上面执行一个动画之后再执行另外一个动画的方法。  
转自这位老兄 [https://www.cnblogs.com/zjjDaily/p/8116935.html][https_www.cnblogs.com_zjjDaily_p_8116935.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]: /images/20220308/46471ca45d9642a789cd1764ff1b8546.png
[https_www.cnblogs.com_zjjDaily_p_8116935.html]: https://www.cnblogs.com/zjjDaily/p/8116935.html