正文
基於CSS3主要代碼實現
效果圖
js代碼
// pages/index2/index2.js
Page({
/**
* 頁面的初始數據
*/
data: {
data: [
{
img: "惠便利自提店鋪優惠多多惠便利自提店鋪優惠多多惠便利自提店鋪優惠多多惠便利自提店鋪優惠多多惠",
linkurl: "",
linkname: "",
starspos: 0,
back_color: "gold"
}, {
img: "江龍:每日惠自提店鋪特價啦~店鋪特價啦~店鋪特價啦~",
linkurl: "",
linkname: "",
starspos: 0, //間距
back_color: "#000000"
}, {
img: "啦啦啦啦啦啦啦啦啦啦~啦啦啦啦啦~啦啦啦啦啦~",
linkurl: "",
linkname: "",
starspos: 0, //間距
back_colors: "red"
}
, {
img: "哈哈哈哈~",
linkurl: "",
linkname: "",
starspos: 0, //間距
back_colors: "red"
}
],
broadcast_arr: {
speed: 2.8, //滾動速度,每秒2.8個字
font_size: "16", //字體大小(px)
text_color: "#ffffff", //字體顏色
back_color: "#269e9e", //背景色
}
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function(options) {
let ititdata = this.data.data,
assist = this.data.broadcast_arr,
this_width = 0,
spacing = 0,
speed = (this.data.broadcast_arr.speed * this.data.broadcast_arr.font_size); //m每秒行走的距離
for (let i in ititdata) {
ititdata[i].starspos = wx.getSystemInfoSync().windowWidth; //以取屏幕寬度爲間距
this_width += ititdata[i].img.length * this.data.broadcast_arr.font_size;
if (i != ititdata.length - 1) {
spacing += ititdata[i].starspos
}
}
let total_length = this_width + spacing;//總長
assist.time = total_length / speed; /**滾動時間*/
assist.width_mal = total_length;
this.setData({
broadcast_arr: assist,
data: ititdata
})
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function() {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function() {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function() {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function() {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function() {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function() {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function() {
}
})
wxml
<view class="marquee_container " style="background:{{broadcast_arr.back_color}};font-size:32rpx;">
<view class='marquee_text' style='--marqueeWidth--:{{-broadcast_arr.width_mal}}px;--speed--:{{broadcast_arr.time}}s;width:{{broadcast_arr.width_mal}}px;'>
<block wx:for="{{data}}">
<view style='color:{{broadcast_arr.text_color}};margin-left:{{index!=0?item.starspos*2:0}}rpx;' class="">
{{item.img}}
</view>
</block>
</view>
</view>
wxss
@keyframes around {
from {
margin-left: 100%;
}
to {
margin-left: var(--marqueeWidth--);
}
}
.marquee_container {
/* background-color: #0099FF; */
padding: 12rpx 0;
position: relative;
width: 100%;
height: 50rpx;
}
.marquee_text {
display: flex;
white-space: nowrap;
animation-name: around;
animation-duration: var(--speed--);
animation-iteration-count: infinite;
animation-timing-function: linear;
line-height: 50rpx;
}
.marquee_tit {
height: 50rpx;
line-height: 50rpx;
position: absolute;
padding-left: 22rpx;
}
結語
第一次寫博客,寫的不是很好,各位大佬多多指點~