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 }