用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-1-11 18:20:21 天下雪原创达人 造轮子 人生巅峰 楼主 4740124

点评:实现了一个简单的动画卡片上拉滑动效果;

2.gif


代码示例:
[AppleScript] 纯文本查看 复制代码
//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[e.target.id];
    wx.navigateTo({
      url: '../detail/detail'
    });
  },
  onLoad: function () {
    console.log('onLoad');
    var that = this;
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      });
    });
  }
})


项目地址及下载:
https://github.com/fanyongfeng/wechatapp
wechatapp-master.zip (763.84 KB, 下载次数: 2939)
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
thanks for contribute source
非常感谢
6666不错哇
女人别点:http://songtasty.com
支持 支持
看看学习学习
学习,感谢楼主
值得支持一下
我是来下载的了哦
6666666666666666666
动画是难点
看看
Good one!
感谢您分享!
1234下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册