animation 不执行
发布于 6 年前 作者 kyu 2876 次浏览 来自 问答

我想touchMove的时候执行animation

可以console.log出来animation对象

可是动画不执行

请问问题出在哪?

<!--------WXML------>

<!–pages/tel/card/cardModel.wxml–>

<template name=“cardList”>

<view class=“cardListBox”>

<!–cardFlexBox–>

<view class=“cardFlexBox” bindtouchstart=‘touchStart’ bindtouchend=“touchEnd” bindtouchmove=‘touchMove’ animation="{{animation}}">

<view class=“cardItem” wx:for="{{[1,2,3,4,5]}}" >

<view class=“cardPic”>

<!-- <image wx:if="{{}}" src="" class=“cardimg cirl”></image>

         <image wx:else src="" class=“cardimg”></image> -->

</view>

<view class=“cardInfor”>{{item}}</view>

<view class=“cardFoot”></view>

</view>

</view>

<!–cardFlexBox end–>

</view>

</template>

<!-----JS------->

Page({

/**

  * 页面的初始数据

  */

data: {

navArray: [],

baseSize: 5,//基数,为了不顶边

offsetLeft: 5,//设置初始距离

linehidden: true, //导航下小横条显示

startX:0,

endX:0,

moveX:0,

animation:{}

},

// Touch处理函数

navTouch: function (e) {

var that = this;

var navPage = e.target.dataset.type;

var baseleft = that.data.baseSize;

var offsetLeft = e.target.offsetLeft + baseleft;

that.setData({

offsetLeft: offsetLeft,

navPage: navPage

});

},

onReady: function () {

var that = this;

that.animation = wx.createAnimation({

duration: 1000,

timingFunction: ‘ease-in-out’,

});

},

touchStart:function(e){

var that = this;

var startX = e.touches[0].pageX;

// console.log(startX);

that.setData({

startX: startX

})

},

touchEnd:function(e){

var that = this;

var endX = e.changedTouches[0].pageX;

that.setData({

endX: endX

})

},

touchMove:function(e){

var that = this;

// console.log(e);

var moveX = e.touches[0].pageX;

var startX = that.data.startX;

var transX = (moveX - startX) + ‘rpx’;

that.animation.translate(transX, 0).step();

console.log(transX,that.animation);

that.setData({

animation: that.animation.export()

})

}

})

console结果
1 回复

我也遇到类似问题,就我目前发现是因为view组件下包含image组件所致,去掉image后动画就可以执行了,还不知道什么原因以及如何解决。

回到顶部