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


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 数组运用实现代码
Apr 13 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
javascript系统时间设置操作示例
Jun 17 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
JS原生实现轮播图的几种方法
Mar 23 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 Socket配置以及实例的详细介绍
2013/06/13 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
javascript实现简单留言板案例
2021/02/09 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
Python抓取电影天堂电影信息的代码
2016/04/07 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python删除文本中行数标签的方法
2018/05/31 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python requests.get带header
2020/05/05 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
师范生自荐信
2013/10/27 职场文书
党员公开承诺事项
2014/03/25 职场文书
团队精神口号
2014/06/06 职场文书
高中班级口号
2014/06/09 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL