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


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 相关文章推荐
基于jquery的时间段实现代码
Aug 02 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
微信小程序使用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
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python中字典映射类型的学习教程
2015/08/20 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
使用Python对MySQL数据操作
2017/04/06 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
学年自我鉴定范文
2013/10/01 职场文书
大学三年的自我评价
2013/12/25 职场文书
青年教师个人总结
2015/02/11 职场文书
公司会议开幕词
2016/03/03 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers