微信小程序?qū)崿F(xiàn)跑馬燈效果

更新時間：2020年10月21日 10:28:56 作者：楠之楓雪

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

網(wǎng)上很多實現(xiàn)跑馬燈的文章，但是很多發(fā)現(xiàn)都是不行的，之一就是文字寬度居然是通過字符數(shù)*文字size計算，明顯是不準確的計算方式。我看了下，發(fā)現(xiàn)可以通過計算控件寬度來精確計算文字寬度，這樣實現(xiàn)的跑馬燈是比較完善的。

效果如下：

實現(xiàn)代碼如下：

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({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 interval: null,
 text: '995年JavaScript誕生時如早一年',
 pace: 1.2, //滾動速度
 interval: 20, //時間間隔
 size: 24, //字體大小in px
 length: 0, //字體寬度
 offsetLeft: 0, //
 windowWidth: 0,
 },
 //根據(jù)viewId查詢view的寬度
 queryViewWidth: function(viewId) {
 //創(chuàng)建節(jié)點選擇器
 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);
 }
 },
 //執(zhí)行跑馬燈動畫
 excuseAnimation: function() {
 var that = this;
 if (that.data.length > that.data.windowWidth) {
  //設置循環(huán)
  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();
 //初始化數(shù)據(jù)
 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();
 });
 }
 })

源碼下載：跑馬燈效果

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: