微信小程序實現(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 = {
// 公告內(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();
}
}
-----2018-12-24 ----
使用的時候需要注意 setInterval 的性能問題, 不用的時候或者不顯示的時候將其停止,否則會像作者一樣給自己挖坑。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
js代碼實現(xiàn)點擊按鈕出現(xiàn)60秒倒計時
這篇文章主要為大家詳細介紹了js代碼實現(xiàn)點擊按鈕出現(xiàn)60秒倒計時,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-12-12
JavaScript子類用Object.getPrototypeOf去調(diào)用父類方法解析
這篇文章主要介紹了JavaScript子類用Object.getPrototypeOf去調(diào)用父類方法。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12
Javascript結合css實現(xiàn)網(wǎng)頁換膚功能
現(xiàn)在網(wǎng)站換皮膚是比較常見的功能,大多數(shù)論壇都有的,要想實現(xiàn)這樣效果可以看如下代碼.2009-11-11
JavaScript實現(xiàn)網(wǎng)頁tab欄效果制作
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁tab欄效果制作,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11
一些Javascript的IE和Firefox(火狐)兼容性的問題總結及常用例子
下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子2009-05-05

