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


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 验证浏览器是否支持javascript的方法小结
May 17 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
js实现简单选项卡制作
Aug 05 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
帅气的琦玉老师
2020/03/02 日漫
用PHP来写记数器(详细介绍)
2006/10/09 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
js图片预加载示例
2014/04/30 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
Python代码实现KNN算法
2017/12/20 Python
python requests 测试代理ip是否生效
2018/07/25 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
学习雷锋活动总结
2014/04/29 职场文书
学习十八大的心得体会
2014/09/01 职场文书
普通党员对照检查材料
2014/09/24 职场文书
出国留学导师推荐信
2015/03/26 职场文书
客户付款通知书
2015/04/23 职场文书
党员证明模板
2015/06/19 职场文书
关于童年的读书笔记
2015/06/26 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL