微信小程序学习用demo：鲜花订购；animation动画卡片效果
点评：实现了一个简单的动画卡片上拉滑动效果；//index.js
//获取应用实例
var app = getApp();
Page({
data: {
animationData: {},
cardInfoList: [{
cardUrl: 'http://dev.wemart.cn/console/images/card/card3.png',
cardInfo: {
cardTitle: '你不知道的花事',
cardInfoMes: ['一月一送，浪漫节日送浪漫花', '一月两送，有趣节日送奇异花', '一月四送，有你在每天都是最好的节日']
}
}, {
cardUrl: 'http://dev.wemart.cn/console/images/card/card2.png',
cardInfo: {
cardTitle: '你不知道的花事',
cardInfoMes: ['一月一送，浪漫节日送浪漫花', '一月两送，有趣节日送奇异花', '一月四送，有你在每天都是最好的节日']
}
}, {
cardUrl: 'http://dev.wemart.cn/console/images/card/card1.png',
cardInfo: {
cardTitle: '你不知道的花事',
cardInfoMes: ['一月一送，浪漫节日送浪漫花', '一月两送，有趣节日送奇异花', '一月四送，有你在每天都是最好的节日']
}
}]
},
//事件处理函数
slidethis: function(e) {
console.log(e);
var animation = wx.createAnimation({
duration: 300,
timingFunction: 'cubic-bezier(.8,.2,.1,0.8)',
});
var self = this;
this.animation= animation;
this.animation.translateY(-420).rotate(-5).translateX(0).step();
this.animation.translateY(62).translateX(25).rotate(0).step();
this.setData({
animationData: this.animation.export()
});
setTimeout(function() {
var cardInfoList = self.data.cardInfoList;
var slidethis = self.data.cardInfoList.shift();
self.data.cardInfoList.push(slidethis);
self.setData({
cardInfoList: self.data.cardInfoList,
animationData: {}
});
}, 350);
},
buythis: function(e) {
console.log(e);
app.buyDetail = this.data.cardInfoList;
wx.navigateTo({
url: '../detail/detail'
});
},
onLoad: function () {
console.log('onLoad');
var that = this;
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
});
});
}
})
**** Hidden Message *****
我想要我想要我想要我想要 看看学习学习学习 6666666666666666666666666
学习学习 专注于与个人游戏开发者合作，有产品的朋友联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊
11111111111111111111111111111111111111111111111111111111111111111111111 我有流量，如果你有产品，那么我们就可以合作，有意的个人开发者朋友可以联系微信号jim20180688，详聊
页:
[1]