本文實例為大家分享了微信小程序實現文字無限輪播展示的具體代碼，供大家參考，具體內容如下

.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 = animationanimation.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 = animationanimation.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 class='scroll_notice'><view class='scroll_notice_item_bg' animation="{{animationData_notice}}"><view class="scroll_notice_item_bg"><image class='scroll_notice_item_image' src='圖片鏈接'></image><view class='scroll_notice_item'>全國快遞本月底將陸續停運，各位請注意補貨時間！</view></view><view class="scroll_notice_item_bg"><image class='scroll_notice_item_image' src='圖片鏈接'></image><view class='scroll_notice_item'>全國快遞本月底將陸續停運，各位請注意補貨時間！</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;}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。