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


Posted in Javascript onDecember 28, 2018

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

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

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

Javascript 相关文章推荐
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
php跨域调用json的例子
Nov 13 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 #Javascript
原生JS实现的自动轮播图功能详解
Dec 28 #Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
微信小程序实现简单跑马灯效果
May 26 #Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 #Javascript
详解puppeteer使用代理
Dec 27 #Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 #Javascript
You might like
PHP脚本数据库功能详解(上)
2006/10/09 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
python控制台中实现进度条功能
2015/11/10 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
pandas对指定列进行填充的方法
2018/04/11 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
python怎么调用自己的函数
2020/07/01 Python
请介绍一下Ant
2016/07/22 面试题
Java基础面试题
2014/07/19 面试题
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
中年人生感言
2014/02/04 职场文书
企业标语大全
2014/07/01 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
2014年变电站工作总结
2014/12/19 职场文书
优秀团支部申报材料
2014/12/26 职场文书
安徽导游词
2015/02/12 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
python数据处理之Pandas类型转换
2022/04/28 Python