找回密码
 立即注册

扫一扫,访问微社区

查看: 10996|回复: 7

微信小程序学习用demo:鲜花订购;animation动画卡片效果

  [复制链接]
发表于 2017-2-21 16:40:03 | 显示全部楼层 |阅读模式
点评:实现了一个简单的动画卡片上拉滑动效果;








[mw_shl_code=html,true]//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
      });
    });
  }
})[/mw_shl_code]




游客,如果您要查看本帖隐藏内容请回复

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

1

回帖

15

金钱

新人求带

积分
0
发表于 2017-7-28 19:50:27 | 显示全部楼层
我想要我想要我想要我想要

0

主题

1

回帖

14

金钱

新人求带

积分
0
发表于 2018-4-16 08:51:57 | 显示全部楼层
看看学习学习学习

0

主题

6

回帖

12

金钱

新人求带

积分
0
发表于 2018-7-20 17:24:17 | 显示全部楼层
6666666666666666666666666

0

主题

2

回帖

24

金钱

新人求带

积分
0
发表于 2018-8-3 16:13:15 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

408

回帖

600

金钱

新人求带

积分
0
发表于 2020-4-6 15:06:12 | 显示全部楼层
专注于与个人游戏开发者合作,有产品的朋友联系微,信,号j i m 2 0 1 8 0 6 8 8,详聊

0

主题

18

回帖

16

金钱

新人求带

积分
0
发表于 2020-7-1 08:47:37 | 显示全部楼层
11111111111111111111111111111111111111111111111111111111111111111111111

0

主题

101

回帖

248

金钱

新人求带

积分
0
发表于 2020-7-1 16:19:38 | 显示全部楼层
我有流量,如果你有产品,那么我们就可以合作,有意的个人开发者朋友可以联系微信号jim20180688,详聊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-11-24 05:15 , Processed in 0.126699 second(s), 31 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表