小程序动画
点击事件
<view>
<image src="../../../images/RightArrow.png" class="icon_5"></image>
<view class="spe" bindtap="security">
<text>已交保证金</text>
<text>3天无理由退还房</text>
<text>押金保障</text>
</view>
</view>
底部滑块
<view class="shadow" wx:if="{{chooseSize||spread}}" bindtap="hideModal">
</view>
<view class="choosen" wx:if="{{chooseSize}}" animation='{{animationData}}'>
<image src="../../../images/close.png" class="icon_4" bindtap="hideModal"></image>
<view class="speTitle">
<view class="iconcircle"></view>
已交保证金</view>
<view>中介已向平台缴纳保证金,交易纠纷时用于保证用户的权益</view>
<view class="speTitle">
<view class="iconcircle"></view>
3天无理由退换房</view>
<view>
用户签合同后3天内可申请3天无理由退房,3天无理由将不收取违约费,押金全退。租金按入住天数计算+200元服务费,不满一天计为1天;换房则无费用
</view>
<view class="speTitle">
<view class="iconcircle"></view>
押金保障</view>
<view>
在平台直接支付押金,退款时,用户直接在平台申请退押金,(脱离平台支付押金无效,只针对在平台支付押金用户
</view>
</view>
js逻辑代码
security() {
this.chooseSezi()
},
chooseSezi: function (e) {
var that = this;
var animation = wx.createAnimation({
duration: 200,
timingFunction: 'linear'
})
that.animation = animation
animation.translateY(1000).step()
that.setData({
animationData: animation.export(),
chooseSize: true
})
setTimeout(function () {
animation.translateY(0).step()
that.setData({
animationData: animation.export(),
clearcart: false
})
}, 10)
},
hideModal: function (e) {
console.log('隐藏');
var that = this;
var animation = wx.createAnimation({
duration: 200,
timingFunction: 'linear'
})
that.animation = animation
animation.translateY(700).step()
that.setData({
animationData: animation.export()
})
setTimeout(function () {
animation.translateY(0).step()
that.setData({
animationData: animation.export(),
chooseSize: false,
spread:false
})
}, 200)
},
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)