js :
/** * 页面的初始数据 */ data: { marquee: { '', text: '' }, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { const houseString = '马马马马马马马马马马马马'; var pre = 0; for (var i = 0; i < houseString.length; i++) { if (houseString.charCodeAt(i) > 255) {// charCode大于255是汉字 pre++; } else { pre += 0.5; } } this.setData({ [`${'marquee'}.text`]: houseString, [`${'marquee'}.width`]: pre }) },
wxml:
<view class="marquee_container" style="--marqueeWidth--:{{-marquee.width}}em"> <view class="marquee_text">{{marquee.text}}</view> </view>
wxss:
/*跑马灯*/ @keyframes around { from { margin-left: 100%; } to { margin-left: var(--marqueeWidth--);/* var接受传入的变量*/ } } .marquee_container{ line-height: 40rpx; background-color: #F8F8F8; height: 1.2em; position: relative; width: 100%; } .marquee_container:hover{ animation-play-state: paused; /*不起作用*/ } .marquee_text{ font-size: 25rpx; display: inline-block; white-space: nowrap; animation-name: around; animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function:linear; }
1