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


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 相关文章推荐
javascript放大镜效果的简单实现
Dec 09 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
JS删除String里某个字符的方法
Jan 06 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
JS 网站性能优化笔记
2011/05/24 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
Python入门必须知道的11个知识点
2018/03/21 Python
Python如何实现转换URL详解
2019/07/02 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
旅游管理毕业生自荐信
2013/11/05 职场文书
采购部岗位职责
2013/11/24 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
五年级学生期末评语
2014/12/26 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers