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


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实现动态CSS换肤技术的脚本
Jun 29 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
js三种排序算法分享
Aug 16 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
JavaScript组合模式---引入案例分析
May 23 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
关于svn冲突的解决方法
2013/06/21 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
js实现数字滚动特效
2019/12/16 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
星球大战与Python之间的那些事
2016/01/07 Python
基于python 字符编码的理解
2017/09/02 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
python Pexpect模块的使用
2020/12/25 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
公司年终奖分配方案
2014/06/16 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
2014年科普工作总结
2014/12/06 职场文书
小学班主任评语
2014/12/29 职场文书
工作检讨书大全
2015/01/26 职场文书
安全教育的主题班会
2015/08/13 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
Python实现Hash算法
2022/03/18 Python
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL