网上很多实现跑马灯的文章, 但是很多发现都是不行的, 之一就是文字宽度居然是通过字符数 * 文字 size 计算, 明显是不准确的计算方式. 我看了下, 发现可以通过计算控件宽度来精确计算文字宽度, 这样实现的跑马灯是比较完善的.
效果如下:
实现代码如下:
wxml:
- <view class="rollCon">
- <view class='box'>
- <view class='text'style='left:{{offsetLeft}}px'>{{text}}</view>
- </view>
- </view>
wxss:
- .rollCon {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 60rpx;
- z-index: 100;
- background: #fde8c7;
- font-size: 20rpx;
- line-height: 60rpx;
- }
- .box {
- width: 100%;
- position: relative;
- }
- .text {
- white-space: nowrap;
- position: absolute;
- top: 0;
- font-size: 24px;
- }
JS:
- Page({
- /**
- * 页面的初始数据
- */
- data: {
- interval: null,
- text: '995 年 JavaScript 诞生时如早一年',
- pace: 1.2, // 滚动速度
- interval: 20, // 时间间隔
- size: 24, // 字体大小 in px
- length: 0, // 字体宽度
- offsetLeft: 0, //
- windowWidth: 0,
- },
- // 根据 viewId 查询 view 的宽度
- queryViewWidth: function(viewId) {
- // 创建节点选择器
- return new Promise(function(resolve) {
- var query = wx.createSelectorQuery();
- var that = this;
- query.select('.' + viewId).boundingClientRect(function(rect) {
- resolve(rect.width);
- }).exec();
- });
- },
- // 停止跑马灯
- stopMarquee: function() {
- var that = this;
- // 清除旧的定时器
- if (that.data != null) {
- clearInterval(that.interval);
- }
- },
- // 执行跑马灯动画
- excuseAnimation: function() {
- var that = this;
- if (that.data.length> that.data.windowWidth) {
- // 设置循环
- let interval = setInterval(function() {
- if (that.data.offsetLeft <= 0) {
- if (that.data.offsetLeft>= -that.data.length) {
- that.setData({
- offsetLeft: that.data.offsetLeft - that.data.pace,
- })
- } else {
- that.setData({
- offsetLeft: that.data.windowWidth,
- })
- }
- } else {
- that.setData({
- offsetLeft: that.data.offsetLeft - that.data.pace,
- })
- }
- }, that.data.interval);
- }
- },
- // 开始跑马灯
- startMarquee: function() {
- var that = this;
- that.stopMarquee();
- // 初始化数据
- that.data.windowWidth = wx.getSystemInfoSync().windowWidth;
- that.queryViewWidth('text').then(function(resolve) {
- that.data.length = resolve;
- console.log(that.data.length + "/" + that.data.windowWidth);
- that.excuseAnimation();
- });
- }
- })
源码下载: 跑马灯效果 https://github.com/bifan-wei/WXMarquee
来源: https://www.jb51.net/article/150495.htm