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 }
