index.vue文件代码如下
<template>
<view>
<view class="teal" style="background: teal;" :animation="animationData"></view>
<button @touchstart="index.touchstart" @touchend="index.touchend">点击时高度为50px,松手时高度为200px</button>
</view>
</template>
<script module="index" lang="wxs" src="./index.wxs"></script>
<script>
export default {
data() {
return {
animationData: {},
}
},
methods: {
cb() {
// 执行动画,将高度变成200px
this.animationData = uni.createAnimation().height(200).step().export();
}
}
}
</script>index.wxs代码如下
module.exports = {
touchstart: function (event, ins) {
// 点击时高度为50px
ins.selectComponent('.teal').setStyle({
height: '50px',
});
},
touchend: function (event, ins) {
// 调用回调函数执行动画
ins.callMethod('cb');
},
}
