Biegral Blog

1. wxml文件中：
2. [html] view plain copy
3. <view class="bottomViewItem">
4. <view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value">
5. <view class="bottomMiddleHeaderItem" animation="{{animationMiddleHeaderItem}}">
6. <!-- 心跳 -->
7. <view class="bottomMiddleHeaderItemSubView">
8. <image src="/images/detail_vote_heart.png" style="width:32rpx; height:32rpx;" animation="{{animationMiddleHeaderItem}}"></image>
9. </view>
11. <!-- 投票文字 -->
12. <view class="bottomMiddleHeaderItemSubView">投票</view>
13. </view>
14. </view>
15. </view>

js文件中：

1. [javascript] view plain copy
2. // 页面渲染完成
3. onReady: function () {
4. var circleCount = 0;
5. // 心跳的外框动画
6. this.animationMiddleHeaderItem = wx.createAnimation({
7. duration:1000, // 以毫秒为单位
8. /**
9. * http://cubic-bezier.com/#0,0,.58,1
10. * linear 动画一直较为均匀
11. * ease 从匀速到加速在到匀速
12. * ease-in 缓慢到匀速
13. * ease-in-out 从缓慢到匀速再到缓慢
14. *
15. * http://www.tuicool.com/articles/neqMVr
16. * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
17. * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
18. */
19. timingFunction: 'linear',
20. delay: 100,
21. transformOrigin: '50% 50%',
22. success: function (res) {
23. }
24. });
26. setInterval(function() {
27. if (circleCount % 2 == 0) {
28. this.animationMiddleHeaderItem.scale(1.15).step();
29. } else {
30. this.animationMiddleHeaderItem.scale(1.0).step();
31. }
33. this.setData({
34. animationMiddleHeaderItem: this.animationMiddleHeaderItem.export()
35. });
37. circleCount++;
38. if (circleCount == 1000) {
39. circleCount = 0;
40. }
41. }.bind(this), 1000);
43. },

2、微信显示倒计时

wxml文件中：

1. [html] view plain copy
2. <!--倒计时 -->
3. <view class="countDownTimeView countDownAllView" >
4. <view class="voteText countDownTimeText">{{countDownDay}}天</view>
5. <view class="voteText countDownTimeText">{{countDownHour}}时</view>
6. <view class="voteText countDownTimeText">{{countDownMinute}}分</view>
7. <view class="voteText countDownTimeText">{{countDownSecond}}秒</view>
8. </view>

js文件中：

1. [javascript] view plain copy
2. Page( {
3. data: {
4. windowHeight: 654,
5. maxtime: "",
6. isHiddenLoading: true,
7. isHiddenToast: true,
8. dataList: {},
9. countDownDay: 0,
10. countDownHour: 0,
11. countDownMinute: 0,
12. countDownSecond: 0,
13. },
14. //事件处理函数
15. bindViewTap: function() {
16. wx.navigateTo( {
17. url: '../logs/logs'
18. })
19. },
20. onLoad: function() {
21. this.setData( {
22. windowHeight: wx.getStorageSync( 'windowHeight' )
23. });
24. },
26. // 页面渲染完成后 调用
27. onReady: function () {
28. var totalSecond = 1505540080 - Date.parse(new Date())/1000;
30. var interval = setInterval(function () {
31. // 秒数
32. var second = totalSecond;
34. // 天数位
35. var day = Math.floor(second / 3600 / 24);
36. var dayStr = day.toString();
37. if (dayStr.length == 1) dayStr = '0' + dayStr;
39. // 小时位
40. var hr = Math.floor((second - day * 3600 * 24) / 3600);
41. var hrStr = hr.toString();
42. if (hrStr.length == 1) hrStr = '0' + hrStr;
44. // 分钟位
45. var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60);
46. var minStr = min.toString();
47. if (minStr.length == 1) minStr = '0' + minStr;
49. // 秒位
50. var sec = second - day * 3600 * 24 - hr * 3600 - min*60;
51. var secStr = sec.toString();
52. if (secStr.length == 1) secStr = '0' + secStr;
54. this.setData({
55. countDownDay: dayStr,
56. countDownHour: hrStr,
57. countDownMinute: minStr,
58. countDownSecond: secStr,
59. });
60. totalSecond--;
61. if (totalSecond < 0) {
62. clearInterval(interval);
63. wx.showToast({
64. title: '活动已结束',
65. });
66. this.setData({
67. countDownDay: '00',
68. countDownHour: '00',
69. countDownMinute: '00',
70. countDownSecond: '00',
71. });
72. }
73. }.bind(this), 1000);
74. },
76. //cell事件处理函数
77. bindCellViewTap: function (e) {
78. var id = e.currentTarget.dataset.id;
79. wx.navigateTo({
80. url: '../babyDetail/babyDetail?id=' + id
81. });
82. }
83. })

效果图：