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


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 相关文章推荐
Maps Javascript
Jan 22 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
详解Vue方法与事件
Mar 09 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
javascript实现左右缓动动画函数
Nov 25 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加入ftp扩展的解决方法
2013/02/07 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
php判断目录存在的简单方法
2019/09/26 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
jQuery中live()方法用法实例
2015/01/19 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
详解django三种文件下载方式
2018/04/06 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Python selenium自动化测试模型图解
2020/04/15 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Python内置函数及功能简介汇总
2020/10/13 Python
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
教师个人鉴定材料
2014/02/08 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2014年工程部工作总结
2014/11/25 职场文书
导师对论文的学术评语
2015/01/04 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
客户付款通知书
2015/04/23 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫