时间: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文件 添加如下:
.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邮箱联系删除。
微信小程序实现图片轮播及文件上传刚刚接触微信小程序,看着网上的资源写了个小例子,本地图片轮播以及图片上传。图片轮播:index.jsvarapp=getApp(
本文实例为大家分享了微信小程序实现实现轮播效果展示的具体代码,供大家参考,具体内容如下wxml:{{item.index+1}}wxss:/*pages/sho
本文实例为大家分享了微信小程序实现无限滚动列表的具体代码,供大家参考,具体内容如下效果图1.0实现方式是利用小程序原声组件swiper,方向设置为纵向:vert
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图WXMLWXSS.Carousel{margin-top:49px;bac
微信小程序主页翻转的照片便是图片轮播加上步骤:微信小程序网页页面连接“便是点一下图片轮播时自动跳转的网页页面连接如需图片轮播表明在主页,请在“小程序管理->主页