.JS文件 onLoad中添加下列代码
var self = this; var width = wx.getSystemInfoSync().screenWidth; function carousel_num() { var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 5000, timingFunction: "linear", delay: 0 }) self.animation = animation animation.translate3d(-width, 0, 100).step() console.log("第一动画开始"); self.setData({ animationData_notice: animation.export(), }) setTimeout(function () { var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 0, timingFunction: "linear", delay: 0 }) self.animation = animation animation.translate3d(0, 0, 100).step() console.log("第二动画开始"); self.setData({ animationData_notice: animation.export(), }) setTimeout(function () { carousel_num(); }, 50) }, 5000) } setTimeout(function () { carousel_num(); }, 100);
.WXML文件 添加如下：
<scroll-view> <view animation="{{animationData_notice}}"> <view> <image src='https://www.jb51.net/图片链接'></image> <view>全国快递本月底将陆续停运，各位请注意补货时间！</view> </view> <view> <image src='https://www.jb51.net/图片链接'></image> <view>全国快递本月底将陆续停运，各位请注意补货时间！</view> </view> </view> </scroll-view>
.WXSS文件 添加如下：
.scroll_notice { position: absolute; left: 0px; top: 0px; width: 100%; white-space: nowrap; height: 65rpx; background-color: #e6513e; } .scroll_notice_item_image { position: absolute; left: 0px; top: 14rpx; width: 49rpx; height: 38rpx; } .scroll_notice_item { margin-left: 61rpx; margin-top: 14rpx; height: 37rpx; font-family: PingFangSC; font-size: 26rpx; font-weight: 500; letter-spacing: 1rpx; text-align: left; color: #fff; } .scroll_notice_item_bg { position: relative; margin-left: 20rpx; height: 100%; display: inline-flex; }