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


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学习笔记 delete运算符
Sep 13 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
Vue运用transition实现过渡动画
May 06 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
小程序实现左右来回滚动字幕效果
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
phpinfo 系统查看参数函数代码
2009/06/05 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php 函数中使用static的说明
2012/06/01 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
Yii使用技巧大汇总
2015/12/29 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
办公室助理岗位职责
2013/12/25 职场文书
担保书怎么写
2014/04/01 职场文书
应用外语系自荐信
2014/06/26 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL