微信小程序实现文字无限轮播效果

时间:2021-05-18

本文实例为大家分享了微信小程序实现文字无限轮播展示的具体代码,供大家参考,具体内容如下

.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;}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章