广告位联系
返回顶部
分享到

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

JavaScript 来源:互联网搜集 作者:酷站 发布时间:2018-11-11 13:58:11 人浏览
摘要

今天小编给大家介绍微信小程序实现跑马灯效果的方法。 网上很多实现跑马灯的文章,但是很多发现都是不行的,之一就是文字宽度居然是通过字符数*文字size计算,明显是不准确的计算方式。我看了下,发现可以通过计算控件宽度来精确计算文字宽度,这样实现的跑

今天小编给大家介绍微信小程序实现跑马灯效果的方法。

网上很多实现跑马灯的文章,但是很多发现都是不行的,之一就是文字宽度居然是通过字符数*文字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();
  });
 }
 })

源码下载:跑马灯效果-[-/a>



版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计