c语言小程序跑马灯,小程序横向跑马灯效果(3种方式)
1.方式1 js實現
看了一下別人的博客，自己寫了一下，效果雖然實現了，但是有一個小bug，就是當滾動完成后，下一個動畫會等待2秒左右才出現，暫時找不到原因！！！
思路：三個動畫，第一個動畫用于，將展示在內容區頭部的文字滾動，第二個動畫，將文字放置在內容區的尾部，第三個動畫，將文字滾動起來。第二和第三個動畫會被放置在定時器中重復運行。
data: {
animationData: {},
},
sleep: function (num) { // copy的，睡眠，但是感覺不到作用
var nowTime = new Date();
var exitTime = nowTime.getTime() + num;
while (true) {
nowTime = new Date();
if (nowTime.getTime() > exitTime)
return;
}
},
textScroll () {
var animation = wx.createAnimation({ // 創建動畫
duration: 8000,
timingFunction: 'linear',
})
this.animation = animation;
// 根據屏幕大小換算文字長度
const w = wx.getSystemInfoSync().windowWidth / 375 * 24 / 2;// 文字的長度
var query = wx.createSelectorQuery();
query.select('.msg-txt').boundingClientRect();
query.exec((res) => {
// 第一個動畫
this.msgTxtWidth = res[0].width;
animation.translateX(-(59 * w - this.msgTxtWidth)).step()
this.setData({
animationData: animation.export()
})
})
setInterval(() => {
// 第二個動畫
// 將文字的頭部置到容器的尾部
console.log(this.msgTxtWidth)
animation.translateX(this.msgTxtWidth).step({
duration: 0
}); // 創建動畫，立刻執行
this.setData({ // 執行
animationData: animation.export()
})
this.sleep(5); // 延遲5微秒
// 第三個動畫
animation.translateX(-(59 * w)).step({duration: 10000});
this.setData({
animationData: animation.export()
})
}, 10000);
},
wxss
/*通知*/
.message{
display:flex;
align-items: center;
width: 100%;
padding: 20rpx 10rpx;
border: 1rpx solid #E7EBEF;
border-radius: 20rpx;
}
.msg-icon{
display: flex;
align-items: center;
width: 15%;
}
.msg-icon-txt{
margin-left: 10rpx;
font-size: 24rpx;
color: #FF5D38;
}
.msg-icon image{
width: 40rpx;
height: 40rpx;
}
.msg{ /*主體*/
flex:1;
overflow: hidden;
}
.msg-txt{
font-size: 24rpx;
color: #7B868C;
white-space: nowrap;
}
.msg-more{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
width: 5%;
}
.msg-more text{
font-size: 24rpx;
color: #BDC7C6;
}
第二種方式，使用css
參考：https://blog.csdn.net/hamelong/article/details/82657614
wxml
一個人活著就是為了讓更多的人更好的活著！
wxss
/*首頁跑馬燈效果*/
@keyframes around {
from {
margin-left: 100%;
}
to {
/* var接受傳入的變量 */
margin-left: var(--marqueeWidth--);
}
}
.marquee_container{
background-color: #fe4655;
height: 50rpx;
line-height: 44rpx;
position: relative;
width: 100%;
margin-top:0rpx;
}
.marquee_container:hover{
/* 不起作用 */
animation-play-state: paused;
}
.marquee_text{
color:#fff;
font-size: 28rpx;
display: inline-block;
white-space: nowrap;
animation-name: around;
animation-duration: 10s; /*過渡時間*/
animation-iteration-count: infinite;
animation-timing-function:linear;
}
/*首頁跑馬燈效果*/
效果展示：
更新方式3：
使用js，實現思路不同于方式1，這次使用絕對定位left
來個簡版的：
data: {
left:0,
txt:"我是一段文字，你知道我意思",
fontSize: 16,
},
onReady: function () {
const screenWidth = wx.getSystemInfoSync().windowWidth; // 獲取屏幕寬度
let txtWidth = this.data.txt.length * this.fontSize; // 獲取文字寬度
let left = this.data.left; // 獲取初始的left
var clearInterval0 = setInterval(() => { // 設置定時器
if (left !== -txtWidth){ // 當文字沒有滾動到完全消失
left = left - 1;
this.setData({
left
})
} else {
left = screenWidth // 將文字的位置放置到尾部
// clearInterval(clearInterval0)
}
}, 20);
},
// wxml +wxss
標題
標題
{{txt}}
.wrapper{
position: relative;
width: 100%;
}
.txt{
font-size: 16px;
position: absolute;
left: 0;
white-space: nowrap;
}
效果：
代碼升級
Page({
data: {
text: '這是一條會滾動的文字滾來滾去的文字跑馬燈，哈哈哈哈哈哈哈哈',
marqueepace: 1, //滾動速度
marqueedistance: 0, //初始滾動距離
marqueedistance2: 0,
marquee2copy_status: false,
marquee2_margin: 60,
size: 14,
orientation: 'left', //滾動方向
interval: 20 // 時間間隔
},
onShow: function () {
// 頁面顯示
var vm = this;
var length = vm.data.text.length * vm.data.size; //文字長度
var windowwidth = wx.getSystemInfoSync().windowWidth; // 屏幕寬度
vm.setData({
length: length,
windowwidth: windowwidth,
marquee2_margin: length < windowwidth ? windowwidth - length : vm.data.marquee2_margin //當文字長度小于屏幕長度時，需要增加補白
});
vm.run1(); // 水平一行字滾動完了再按照原來的方向滾動
vm.run2(); // 第一個字消失后立即從右邊出現
},
run1: function () {
var vm = this;
var interval = setInterval(function () {
if (-vm.data.marqueedistance < vm.data.length) {
vm.setData({
marqueedistance: vm.data.marqueedistance - vm.data.marqueepace,
});
} else {
clearInterval(interval);
vm.setData({
marqueedistance: vm.data.windowwidth
});
vm.run1();
}
}, vm.data.interval);
},
run2: function () {
var vm = this;
var interval = setInterval(function () {
if (-vm.data.marqueedistance2 < vm.data.length) {
// 如果文字滾動到出現marquee2_margin=30px的白邊，就接著顯示
vm.setData({
marqueedistance2: vm.data.marqueedistance2 - vm.data.marqueepace,
marquee2copy_status: vm.data.length + vm.data.marqueedistance2 <= vm.data.windowwidth + vm.data.marquee2_margin,
});
} else {
if (-vm.data.marqueedistance2 >= vm.data.marquee2_margin) { // 當第二條文字滾動到最左邊時
vm.setData({
marqueedistance2: vm.data.marquee2_margin // 直接重新滾動
});
clearInterval(interval);
vm.run2();
} else {
clearInterval(interval);
vm.setData({
marqueedistance2: -vm.data.windowwidth
});
vm.run2();
}
}
}, vm.data.interval);
}
})
wxml + wxss
1 顯示完后再顯示
{{text}}
2 出現白邊后即顯示
{{text}}
{{text}}
.example {
display: block;
width: 100%;
height: 100rpx;
}
.marquee_box {
width: 100%;
position: relative;
}
.marquee_text {
white-space: nowrap;
position: absolute;
top: 0;
}
效果：
總結
以上是生活随笔為你收集整理的c语言小程序跑马灯,小程序横向跑马灯效果(3种方式)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [pytorch、学习] - 5.8 网
- 下一篇： 微信小程序实现秒杀、拼团、团购等效果