欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

前言

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

效果圖

短字

長(zhǎng)字

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 : '首頁(yè)',
 }

 data = {
 // 公告內(nèi)容
 announ : '超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度超長(zhǎng)度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 => {

  //加上一百是因?yàn)榉乐乖跉w零時(shí)出現(xiàn)閃爍的情況
  let maxContentWidth = ContentRes.width + 100,
  maxTextWidth = TextRes.width;
  //初始化
  self.announNum = TextRes.width
  self.$apply();

  //定時(shí)器
  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 ----

使用的時(shí)候需要注意 setInterval 的性能問(wèn)題, 不用的時(shí)候或者不顯示的時(shí)候?qū)⑵渫Ｖ?，否則會(huì)像作者一樣給自己挖坑。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論