這篇文章主要講解了微信小程序?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)。
效果圖
短字
長字
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è)資訊頻道。