微信小程序实现简单跑马灯效果


Posted in Javascript onMay 26, 2020

跑马灯效果比较常见,一般做电商类的小程序,都会用到,所以代码君今天特地写一篇文章,来教一下大家,如何去实现跑马灯效果,下面是代码君实现的效果,可以先看一下!

微信小程序实现简单跑马灯效果

跑马灯效果的制作

制作方式很简单,先方上代码,后面会对代码详细讲解

一、wxml界面的实现

<!-- 跑马灯效果 -->
 <view class="example">
 <view class="marquee_box">
 <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
  <image src="{{adUrl}}" class='ad-image' />{{text}}
 </view>
 </view>
 </view>

界面布局很简单,一个底部背景容器,加入一个广播图片和对应的跑马灯文字

二、wxss样式

.example {
 display: block;
 width: 100%;
 height: 70rpx;
 background-color: #f2f2f2;
 line-height: 70rpx;
}

.marquee_box {
 width: 100%;
 position: relative;
}

.marquee_text {
 white-space: nowrap;
 position: absolute;
 top: 0;
 display: flex;
 flex-direction: row;
}

.ad-image {
 width: 40rpx;
 height: 40rpx;
 margin-right: 10rpx;
 margin-top: 15rpx;
}

样式就这些,这里代码君要带着大家回顾一下以前教程里讲解的内容

1.文字居中css样式要如何设置?
只需要将属性height与line-height设置成一样高度即可

2.display属性

none:此元素不会被显示
block:两个元素自动换行
inline:两个元素靠在一起
inherit:继承父类
flex:多栏多列

三、xxx.js

Page({
 data: {
 text: '51淘甄?,一个可以省钱的购物平台',
 marqueePace: 1,//滚动速度
 marqueeDistance: 0,//初始滚动距离
 size: 14,
 orientation: 'left',//滚动方向
 interval: 20, // 时间间隔
 adUrl: '../../images/ic_home_msg.png',
 },
 onShow: function () {
 // 页面显示
 var that = this;
 var length = that.data.text.length * that.data.size;//文字长度
 var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
 that.setData({
 length: length,
 windowWidth: windowWidth,
 });
 that.runMarquee();// 水平一行字滚动完了再按照原来的方向滚动
 },
 runMarquee: function () {
 var that = this;
 var interval = setInterval(function () {
 //文字一直移动到末端
 if (-that.data.marqueeDistance < that.data.length) {
 that.setData({
  marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,
 });
 } else {
 clearInterval(interval);
 that.setData({
  marqueeDistance: that.data.windowWidth
 });
 that.runMarquee();
 }
 }, that.data.interval);
 }
})

js里面需要讲解的比较多

1.setInterval 计时器如何使用?

setInterval(function(){
console.log("interval")
},1000)

这个方法是微信小程序的api,直接使用即可,和正常的定时器一样,setInterval需要传入两个参数,一个是回调的方法,另一个是每隔多久执行一次,在此项目中,我们用的是字段参数interval,值设置为20

2.settimeout和setinterval()这两个都是腾讯提供的API,他们有什么区别吗?

  • settimeout隔一段时间执行函数且执行一次,场景是我们可能希望一个任务隔一段时间后再执行
  • etinterval()函数是每隔一段时间便执行,就是会一直循环执行,如果想停止的话可以使用clearinterval

3.跑马灯实现原理

  • 第一步:计算跑马灯文字长度
  • 第二步:每隔一段时间,移动一点距离,产生移动
  • 第三步:当移出屏幕,重置跑马灯的距离为屏幕宽度,然后就可以继续循环第一步操作了
  • 根据代码君说的这几步,读者可以去一一对照代码,方法函数runMarquee里面的代码逻辑就是执行以上三步,在此代码君就不过多解释了

总结

以上就是跑马灯效果的整个流程,原理也不是很难,一个计时器,轻松就可以实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript eval函数深入认识
Feb 21 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 #Javascript
详解puppeteer使用代理
Dec 27 #Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 #Javascript
详解angular2 控制视图的封装模式
Dec 27 #Javascript
JavaScript原型对象原理与应用分析
Dec 27 #Javascript
angular6 填坑之sdk的方法
Dec 27 #Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
layui分页效果实现代码
2017/05/19 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
详解Vue之事件处理
2020/07/10 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
Python Django使用forms来实现评论功能
2016/08/17 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
带薪年假请假条
2014/02/04 职场文书
2014年司机工作总结
2014/11/21 职场文书
入队仪式主持词
2015/07/04 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
安全生产标语口号
2015/12/26 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python