亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序實現(xiàn)文字跑馬燈

 更新時間:2020年05月26日 10:16:06   作者:qq_28707553  
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)文字跑馬燈,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

前言

要實現(xiàn)跑馬燈主要就是獲得判斷開始定界和結束定界, 1.9.3新增的wxml操作接口 就可以拿到節(jié)點長寬等屬性,當然你也可以直接用 文字數(shù)量 * 文字大小(注意字體的單位px,rpx)。

效果圖

短字

長字

wxml

<view class="content">
 <text class="every" decode="{{true}}" style="right:{{announZf}}{{announNum}}px">{{announ}}</text>
</view>

js

我這里用的是wepy寫的,湊合著看吧

export default class ShopIndex extends wepy.page {

 config = {
 navigationBarTitleText : '首頁',
 }

 data = {
 // 公告內容
 announ : '超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度v',
 announNum : 0,
 announy : 280,
 announZf : '-'
 }

 onLoad() {
 
 let self = this;
 var query = wepy.createSelectorQuery();
 query.select('.content').boundingClientRect(ContentRes => {
  var query = wepy.createSelectorQuery();
  query.select('.every').boundingClientRect(TextRes => {

  //加上一百是因為防止在歸零時出現(xiàn)閃爍的情況
  let maxContentWidth = ContentRes.width + 100,
  maxTextWidth = TextRes.width;
  //初始化
  self.announNum = TextRes.width
  self.$apply();

  //定時器
  setInterval(()=>{
   if(self.announZf == '-') {
   if(self.announNum <= 0) {
    self.announZf = ''
   } else {
    self.announNum -= 1
   }
   } else {
   if(self.announNum > (maxContentWidth)) {
    //歸位
    self.announZf = '-'
    self.announNum = maxTextWidth
   } else {
    self.announNum += 1
   }
   } 
   self.$apply();  
  },5)
  }).exec();
 }).exec();

 }
 }

-----2018-12-24 ----

使用的時候需要注意 setInterval 的性能問題, 不用的時候或者不顯示的時候將其停止,否則會像作者一樣給自己挖坑。

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

相關文章

  • 使用js獲取QueryString的方法小結

    使用js獲取QueryString的方法小結

    從網上看到一些使用js獲取QueryString的方法,但用起來不是很理想,所以決定自己寫一個。主要原理是使用正則表達式匹配location.search中的字符串。
    2010-02-02
  • Javascript中浮點數(shù)相乘的一個解決方法

    Javascript中浮點數(shù)相乘的一個解決方法

    這篇文章主要介紹了Javascript中浮點數(shù)相乘的一個解決方法,需要的朋友可以參考下
    2014-06-06
  • JavaScript(js)處理的HTML事件、鍵盤事件、鼠標事件簡單示例

    JavaScript(js)處理的HTML事件、鍵盤事件、鼠標事件簡單示例

    這篇文章主要介紹了JavaScript(js)處理的HTML事件、鍵盤事件、鼠標事件,結合實例形式分析了JavaScript針對HTML事件、鍵盤事件及鼠標事件的簡單處理方法,需要的朋友可以參考下
    2019-11-11
  • javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)

    javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)

    for循環(huán)是非?;A的javascript知識,但由于JS太靈活了,所以可能出現(xiàn)一些讓初學者崩潰的寫法。我決定由淺入深的解釋一下for循環(huán),算是給比我還新手的新手解惑吧,少走彎路
    2012-08-08
  • JS+CSS相對定位實現(xiàn)的下拉菜單

    JS+CSS相對定位實現(xiàn)的下拉菜單

    這篇文章主要介紹了JS+CSS相對定位實現(xiàn)的下拉菜單,涉及JavaScript結合css的定位技術實現(xiàn)下拉菜單的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-10-10
  • Bootstrap Modal遮罩彈出層代碼分享

    Bootstrap Modal遮罩彈出層代碼分享

    本文給大家分享的這段代碼并非是Bootstrap的遮罩,只是簡單版的遮罩效果,對bootstrap modal 遮罩效果感興趣的朋友可以參考下本文
    2016-11-11
  • 深入理解JSON數(shù)據源格式

    深入理解JSON數(shù)據源格式

    JSON 在很多場合下作為數(shù)據格式比XML要更加方便。JSON的數(shù)據由對象、數(shù)組和元素等格式組成。每種格式都可以包含合法的JavaScript數(shù)據類型
    2014-01-01
  • js基于canvas實現(xiàn)時鐘組件

    js基于canvas實現(xiàn)時鐘組件

    這篇文章主要介紹了js基于canvas實現(xiàn)時鐘組件的方法,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下
    2021-02-02
  • js 分頁全選或反選標識實現(xiàn)代碼

    js 分頁全選或反選標識實現(xiàn)代碼

    分頁全選或反選標識 對多選按鈕操作。 批量全選添加、批量移除。 行單選添加、移除。 分頁之后(全選或不選)狀態(tài)標識依然存在
    2011-08-08
  • JavaScript躲避行星游戲實現(xiàn)全程

    JavaScript躲避行星游戲實現(xiàn)全程

    本文將使用 canvas 創(chuàng)建一個躲避小行星游戲。另外將重點介紹的兩個方面是:如何使用 JavaScript 來檢測鍵盤輸入,以及如何在游戲中使用和處理 HTML5 音頻。希望你能夠喜歡
    2022-08-08

最新評論