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


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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
js opener的使用详解
Jan 11 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 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读取目录下所有文件的代码
2008/01/07 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
js给selected添加options的方法
2015/05/06 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Python中偏函数用法示例
2018/06/07 Python
分析经典Python开发工程师面试题
2019/04/08 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
食品安全标语
2014/06/07 职场文书
学习雷锋标语
2014/06/25 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
七年级地理教学计划
2015/01/22 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
人工作失职检讨书
2015/05/05 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android