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


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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
jQuery 选择器理解
Mar 16 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
python多进程共享变量
2016/04/06 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python探索之自定义实现线程池
2017/10/27 Python
基于python绘制科赫雪花
2018/06/22 Python
Python docx库用法示例分析
2019/02/16 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
执行力心得体会
2013/12/31 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android