.js文件
Page({
data:{
text: null,
marqueePace: 1,
marqueeDistance: 0,
marquee_margin: 30,
size: 14,
interval: 20,
textid: 0
},
onLoad: function () {
var that = this;
wx.request({
url: `${host}api/content?table=info&num=1&recom=3`,
success: function (res) {
that.setData({
text: res.data[0].title,
textid: res.data[0].id,
});
let length = that.data.text.length * that.data.size;
that.setData({
length: length,
windowWidth: 50
});
that.scrolltxt();
}
});
},
scrolltxt: function () {
var that = this;
var length = that.data.length;
var windowWidth = that.data.windowWidth;
if (length > windowWidth) {
var interval = setInterval(function () {
var maxscrollwidth = length + that.data.marquee_margin;
var crentleft = that.data.marqueeDistance;
if (crentleft < maxscrollwidth) {
that.setData({
marqueeDistance: crentleft + that.data.marqueePace
})
}
else {
that.setData({
marqueeDistance: 0
});
clearInterval(interval);
that.scrolltxt();
}
}, that.data.interval);
}
else {
that.setData({ marquee_margin: "1000" });
}
},
});
.wxml文件
<scroll-view class="gonggao">
<navigator url="../news/show/show?id={{textid}}">
<view class="scrolltxt">
<view class="marquee_box">
<view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
<text>{{text}}</text>
<text style="margin-right:{{marquee_margin}}px;"></text>
<text style="margin-right:{{marquee_margin}}px;">{{text}}</text>
</view>
</view>
</view>
</navigator>
</scroll-view>
.wxss文件
.gonggao {
width: 80%;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
border-left: 1px solid #ccc;
}
.scrolltxt{
padding:0 20rpx;
background:#F3F3F3;
}
.marquee_box {
position:relative;
color:#333;
height:100rpx;
display:block;
overflow:hidden;
}
.marquee_text {
white-space: nowrap;
position:absolute;
top:0;
font-size:14px;
height: 100rpx;
line-height:100rpx;
}
