小程序--滚动公告栏

 1  //JS 部分 
　　　data: {
 2     text: "公告公告公告公告公告公告公告公告公告公告公告公告公告公告",
 3     animation: null,
 4     timer: null,
 5     duration: 0,
 6     textWidth: 0,
 7     wrapWidth: 0
 8  },
 9 /**
10    * 生命周期函数--监听页面显示
11    */
12   onShow: function () {
13      this.initAnimation(this.data.text)
14   },
15 /**
16    * 生命周期函数--监听页面隐藏
17    */
18   onHide: function () {
19     this.destroyTimer()
20      this.setData({
21       timer: null
22     })
23   },
24 /**
25    * 生命周期函数--监听页面卸载
26    */
27   onUnload: function () {
28     this.destroyTimer()
29      this.setData({
30        timer: null
31     })
32   },
33 destroyTimer() {
34     if (this.data.timer) {
35       clearTimeout(this.data.timer);
36     }
37   },
38   /**
39    * 开启公告字幕滚动动画
40    * @param  {String} text 公告内容
41    * @return {[type]} 
42    */
43   initAnimation(text) {
44     let that = this
45     this.data.duration = 15000
46     this.data.animation = wx.createAnimation({
47       duration: this.data.duration,
48       timingFunction: 'linear'
49     })
50     let query = wx.createSelectorQuery()
51     query.select('.content-box').boundingClientRect()
52     query.select('#text').boundingClientRect()
53     query.exec((rect) => {
54       that.setData({
55         wrapWidth: rect[0].width,
56         textWidth: rect[1].width
57       }, () => {
58         this.startAnimation()
59       })
60     })
61   },
62   // 定时器动画
63   startAnimation() {
64     //reset
65     // this.data.animation.option.transition.duration = 0
66     const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({
67       duration: 0
68     })
69     this.setData({
70       animationData: resetAnimation.export()
71     })
72     // this.data.animation.option.transition.duration = this.data.duration
73     const animationData = this.data.animation.translateX(-this.data.textWidth).step({
74       duration: this.data.duration
75     })
76     setTimeout(() => {
77       this.setData({
78         animationData: animationData.export()
79       })
80     }, 100)
81     const timer = setTimeout(() => {
82       this.startAnimation()
83     }, this.data.duration)
84     this.setData({
85       timer
86     })
87   },

 1  
　　　<!--HTML 部分-->
　　<view class="notice">
 2         <view class="icon">
 3         <image src="https://tjbhb.weixintong365.com/busiroom/xiaochengxun/images/notice.png"></image>
 4         </view>
 5         <view class="left-box">
 6         <view class="left-text"></view>
 7         <view class='content-box'>
 8           <view class='content-text' animation="{{animationData}}"><text id="text">1.{{text}}2.{{text}}</text></view>
 9         </view>
10         <view class="right-text"></view>
11       </view>
12     </view>


 1

　　/*CSS 部分*/

　　　.notice {
 2   width: 100%;
 3   display: flex;
 4   align-content: center;
 5   justify-content: space-between;
 6   padding: 10rpx 25rpx;
 7   background: #cfdff3;
 8 }
 9 .notice .icon{
10   width: 8%;
11   display: flex;
12   align-items: center;
13 }
14 .notice .icon image{
15   width: 40rpx;
16   height: 40rpx;
17 }
18 
19 .left-box {
20   width: 92%;
21   position: relative;
22   display: flex;
23   align-items: center;
24 }
25 
26 .left-text {
27   position: absolute;
28   left: 0;
29   width: 40rpx;
30   height: 100%;
31   /* background: linear-gradient(to left,rgba(241,241,241,0),rgb(130, 176, 245)); */
32   z-index: 99;
33 }
34 
35 .right-text {
36   position: absolute;
37   right: -1rpx;
38   width: 40rpx;
39   height: 100%;
40   /* background: linear-gradient(to left,rgb(130, 176, 245),rgba(241,241,241,0)); */
41   z-index: 99;
42 }
43 
44 .content-box {
45   overflow: hidden;
46   width: 100%;
47 }
48 
49 .content-text {
50   color: #5e5e5e;
51   white-space: nowrap;
52   font-size: 28rpx;
53 }
54 .content-text text{
55   margin-right: 50rpx;
56 }