溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了微信小程序實現文字跑馬燈的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
前言
要實現跑馬燈主要就是獲得判斷開始定界和結束定界, 1.9.3新增的wxml操作接口 就可以拿到節點長寬等屬性，當然你也可以直接用 文字數量 * 文字大小(注意字體的單位px,rpx)。
效果圖
短字
長字
wxml
<view class="content">
<text class="every" decode="{{true}}" >{{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 => {
//加上一百是因為防止在歸零時出現閃爍的情況
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();
}
}看完上述內容，是不是對微信小程序實現文字跑馬燈的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
