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


Posted in Javascript onOctober 21, 2020

网上很多实现跑马灯的文章,但是很多发现都是不行的,之一就是文字宽度居然是通过字符数*文字size计算,明显是不准确的计算方式。我看了下,发现可以通过计算控件宽度来精确计算文字宽度,这样实现的跑马灯是比较完善的。

效果如下:

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

实现代码如下:

wxml:

<view class="rollCon">
 <view class='box'> 
 <view class='text'style='left:{{offsetLeft}}px' >{{text}}</view>
</view>
</view>

wxss:

.rollCon {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 60rpx;
 z-index: 100;
 background: #fde8c7;
 font-size: 20rpx;
 line-height: 60rpx;
}

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

.text {
 white-space: nowrap;
 position: absolute;
 top: 0;
 font-size: 24px;
}

js:

Page({

 /**
 * 页面的初始数据
 */
 data: {
 interval: null,
 text: '995年JavaScript诞生时如早一年',
 pace: 1.2, //滚动速度
 interval: 20, //时间间隔
 size: 24, //字体大小in px
 length: 0, //字体宽度
 offsetLeft: 0, //
 windowWidth: 0,
 },
 //根据viewId查询view的宽度
 queryViewWidth: function(viewId) {
 //创建节点选择器
 return new Promise(function(resolve) {
  var query = wx.createSelectorQuery();
  var that = this;
  query.select('.' + viewId).boundingClientRect(function(rect) {
  resolve(rect.width);
  }).exec();
 });

 },
 //停止跑马灯
 stopMarquee: function() {
 var that = this;
 //清除旧的定时器
 if (that.data != null) {
  clearInterval(that.interval);
 }
 },
 //执行跑马灯动画
 excuseAnimation: function() {
 var that = this;
 if (that.data.length > that.data.windowWidth) {
  //设置循环
  let interval = setInterval(function() {
  if (that.data.offsetLeft <= 0) {
   if (that.data.offsetLeft >= -that.data.length) {
   that.setData({
    offsetLeft: that.data.offsetLeft - that.data.pace,
   })
   } else {
   that.setData({
    offsetLeft: that.data.windowWidth,
   })
   }
  } else {
   that.setData({
   offsetLeft: that.data.offsetLeft - that.data.pace,
   })
  }
  }, that.data.interval);
 }
 },
 //开始跑马灯
 startMarquee: function() {
 var that = this;
 that.stopMarquee();
 //初始化数据
 that.data.windowWidth = wx.getSystemInfoSync().windowWidth;
 that.queryViewWidth('text').then(function(resolve) {
  that.data.length = resolve;
  console.log(that.data.length + "/" + that.data.windowWidth);
  that.excuseAnimation();
 });
 }
 })

源码下载:跑马灯效果

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

Javascript 相关文章推荐
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
jquery默认校验规则整理
Mar 24 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
深入探寻javascript定时器
Jan 02 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
详解vue组件基础
May 04 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 #Javascript
vue.js自定义组件directives的实例代码
Nov 09 #Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 #Javascript
webpack 静态资源集中输出的方法示例
Nov 09 #Javascript
vue中如何去掉空格的方法实现
Nov 09 #Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 #Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 #Javascript
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
php ci框架验证码实例分析
2013/06/26 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
vue.js 微信支付前端代码分享
2018/02/10 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python基于递归解决背包问题详解
2019/07/03 Python
python实现飞行棋游戏
2020/02/05 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
Python的信号库Blinker用法详解
2020/12/31 Python
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
名人演讲稿范文
2013/12/28 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
公司投资建议书
2014/05/16 职场文书
公司副总经理任命书
2014/06/05 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python