小程序动画
点击事件
<!-- 三大特色 -->
<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>
<!-- <image src="../../../images/bao.png" class="icon_3"></image> -->
已交保证金</view>
<view>中介已向平台缴纳保证金,交易纠纷时用于保证用户的权益</view>
<view class="speTitle">
<view class="iconcircle"></view>
<!-- <image src="../../../images/3.png" class="icon_3"></image> -->
3天无理由退换房</view>
<view>
用户签合同后3天内可申请3天无理由退房,3天无理由将不收取违约费,押金全退。租金按入住天数计算+200元服务费,不满一天计为1天;换房则无费用
</view>
<view class="speTitle">
<view class="iconcircle"></view>
<!-- <image src="../../../images/ya.png" class="icon_3"></image> -->
押金保障</view>
<view>
在平台直接支付押金,退款时,用户直接在平台申请退押金,(脱离平台支付押金无效,只针对在平台支付押金用户
</view>
</view>
js逻辑代码
security() {
// console.log('kkk')
this.chooseSezi()
},
// 动画函数
chooseSezi: function (e) {
// 用that取代this,防止不必要的情况发生
var that = this;
// 创建一个动画实例
var animation = wx.createAnimation({
// 动画持续时间
duration: 200,
// 定义动画效果,当前是匀速
timingFunction: 'linear'
})
// 将该变量赋值给当前动画
that.animation = animation
// 先在y轴偏移,然后用step()完成一个动画
animation.translateY(1000).step()
// 用setData改变当前动画
that.setData({
// 通过export()方法导出数据
animationData: animation.export(),
// 改变view里面的Wx:if
chooseSize: true
})
// 设置setTimeout来改变y轴偏移量,实现有感觉的滑动 滑动时间
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)
},