真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

這篇文章主要講解了微信小程序?qū)崿F(xiàn)文字跑馬燈的方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。

創(chuàng)新互聯(lián)建站是專業(yè)的永登網(wǎng)站建設(shè)公司,永登接單;提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行永登網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

前言

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

效果圖

短字

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

長字

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

wxml


 {{announ}}

js

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

export default class ShopIndex extends wepy.page {

 config = {
 navigationBarTitleText : '首頁',
 }

 data = {
 // 公告內(nèi)容
 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();

 }
 }

看完上述內(nèi)容,是不是對微信小程序?qū)崿F(xiàn)文字跑馬燈的方法有進一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


標題名稱:微信小程序?qū)崿F(xiàn)文字跑馬燈的方法
文章URL:http://weahome.cn/article/jhodei.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部