小程序中实现跑马灯文字滚动效果组件,自动根据内容宽度计算滚动距离

原创 创建时间:2019-10-09 访问量:54 赞:0 踩:0

组件名称:marquee

文件名称有:

marquee.js

marquee.json

marquee.wxml

mqrquee.wxss

效果如下图所示:

左侧最新是标题,可以传给组件显示,右侧是滚动内容可以传给组件滚动。那个小红点用于通知也是通过一个变量控制,不过本文主要介绍滚动部分代码。下面是源代码:

marquee.js 这个文件的主要代码就是获取元素的宽度

// components/marquee/marquee.js

const app = getApp();

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String
    },
    text: {
      type: String
    },
    tag: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    screenWidth: app.globalData.ScreenWidth,
    marqueeWidth: 0,
    marqueeSeconds: 0,
  },

  /**
   * 生命周期函数
   */
  ready: function () {
    this.setTextWidth();
  },

  /**
   * 组件的方法列表
   */
  methods: {
    setTextWidth: function () {
      let query = this.createSelectorQuery();
      query.select('.marquee-text').boundingClientRect(rect => {
        if (rect) {
          let scrollDistance = this.data.screenWidth + rect.width; // rect.width就是marquee-text的view的宽度,由于其中文本强制不换行。
          this.setData({
            marqueeWidth: -rect.width, // 负值就是移动位置的绝对位置,负的宽度刚好将所有文本完全向左移出
            marqueeSeconds: scrollDistance * 0.05 // 计算滚动时间,如果同时使用多个组件保存这几个不同宽度内容的滚动速度几乎一致
          });
        }
      }).exec();
    }
  }
})

marquee.json 这个默认就行

{
  "component": true,
  "usingComponents": {}
}

marquee.wxml 样式文件相当重要

<!--components/marquee/marquee.wxml-->

<view class="container">
  <view class='left'>
    <text>{{title}}</text>
    <view class="tag" wx:if="{{tag}}"></view>
  </view>
  <view class='marquee-container' style='--marqueeWidth--:{{marqueeWidth}}px;--marqueeSeconds--:{{marqueeSeconds}}s'>
    <view class='marquee-text'>{{text}}</view>
  </view>
  <view class='right'></view>
</view>

mqrquee.wxss

/* components/marquee/marquee.wxss */

.container {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  align-items: center;
  font-size: 30rpx;
  line-height: 30rpx;
}

.left {
  width: 100rpx;
  border-right: 1px solid rgb(219, 219, 219);
  text-align: center;
  color: rgb(27, 134, 221);
  font-weight: bold;
  position: relative;
}

.right {
  width: 10rpx;
}

.marquee-container {
  background-color: #fff;
  position: relative;
  overflow: hidden;
  flex: 1;
}

.marquee-text {
  display: inline; /*这个必须,否则计算的内容宽度不准确,导致内容没有滚动完就重新开始滚动,用inline-block也可以,不过ios上有字体大小的问题,其他博客有说明原因*/
  white-space: nowrap; /*这个必须,让文字内容不能换行,否则滚动无意义,也无法计算实际滚动宽度*/
  animation-name: around;
  animation-duration: var(--marqueeSeconds--);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  color: rgb(27, 134, 221);
}

@keyframes around {
  from {
   margin-left: 100%;
  }
  to {
   margin-left: var(--marqueeWidth--);
  }
}

.tag {
  width: 10rpx;
  height: 10rpx;
  border-radius: 5rpx;
  background-color: red;
  position: absolute;
  left: 2rpx;
  top: -2rpx;
}


评论
 我想说:
==已经到底了==
关注: 粉丝: 积分:
Copyright ©2018 工联信息网——打造最实用且免费的互联网资源共享社区
如有疑问和需求请致邮箱:need@glxxw2018.com
不良信息反馈及建议请致邮箱:accusation@glxxw2018.com
沪ICP备18018158号-1