微信小程序实现跑马灯效果(自定义组件详解)

深藏阁楼爱情的钟 2023-01-12 01:17 275阅读 0赞

首先看一下效果吧

![20210127134842796.png][]

首先我们在项目根目录建一个公共文件夹,这里我命名为components

在components里面创建一个组件, dt-horse-race-lamp > index   最后我会把我的目录结构给大家看一下,    代码都有注释,这里我就不做过多的解释了

### 组件wxml ###

### 组件js ###

Component({
      /**
       * 组件的属性列表
       */
      properties: {
        marqueeDistance: {        //初始滚动距离
          type: [String, Number],
          value: 0        
        },
        size: {       // 字体大小
          type: Number,
          value: 14
        },
        horseRaceLampList: {         // 跑马灯内容
          type: Array,
          value: []
        },
        orientation: {    // 滚动方向
          type: String,
          value: 'left'
        },
        interval: {       // 时间间隔
          type: [String, Number],
          value: 20
        },
        marqueePace: {      // 滚动速度
          type: Number,
          value: 1
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
    
      }
    })

### 组件wxss ###

.horse-race-lamp {
      height: 115rpx;
      line-height: 115rpx;
      background: #FA443A;
      border: 1px solid #fa3228;
    }
    
    .example {
      display: block;
      height: 60rpx;
      color: #FFFFFF;
      line-height: 60rpx;
     }
     
     .marquee-box {
      width: 100%;
      position: relative;
     }
     
     .marquee-text {
      white-space: nowrap;
      position: absolute;
      top: 0;
      display: flex;
      flex-direction: row;
     }
     
    .marquee-con {
      background-color: #FF7D74;
      padding: 0 30rpx 0 30rpx;
      border-top-right-radius: 10rpx;
      border-bottom-right-radius: 10rpx;
      margin-top: 28rpx;
      margin-left: -10rpx;
    }
    
    .user-head {
      width: 81rpx;
      height: 81rpx;
      border-radius: 50%;
      border: 1px solid #FFFFFF;
      display: block;
    }
    
    .marquee-monomer {
      display: flex;
      margin-top: 10rpx;
      margin-right: 60rpx;
    }
    
    .marquee-monomer:last-child {
      margin-right: 0;
    }
    
    .marquee-monomer-left {
      z-index: 99;
    }
    
    .marquee-monomer-left-desc {
      font-size: 20rpx;
      color: #fa9551;
      background: linear-gradient(135deg,  #fff4ec, #fccdae);
      height: 28rpx;
      line-height: 28rpx;
      width: 79rpx;
      text-align: center;
      border-radius: 5rpx;
      margin: -20rpx auto 0;
    }

### 组件json ###

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

接下来我们在需要的页面中引用一下

### index.json ###

{
      "usingComponents": {
        "dt-horse-race-lamp": "../../../components/dt-horse-race-lamp/index",
      }
    }

### index.wxml ###

<dt-horse-race-lamp horseRaceLampList="{
       {horseRaceLampList}}" marqueeDistance="{
       {marqueeDistance}}" interval="{
       {interval}}" orientation="{
       {orientation}}" size="{
       {size}}" marqueePace="{
       {marqueePace}}"></dt-horse-race-lamp>

### index.js ###

Page({
        data: {
             horseRaceLampList: [{text: '51淘甄貨,一个可以省钱的购物平台'}, {text: '51淘甄貨,一个可以省钱的购物平台'}],          // 跑马灯内容
            marqueePace: 1,             // 跑马灯滚动速度
            marqueeDistance: 0,           // 跑马灯滚动距离
            interval: 20,               // 跑马灯时间间隔
            orientation: 'left',        // 跑马灯滚定方向
            size: 14,                   // 跑马灯字体大小
        },
        /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        let _this = this;
        // 跑马灯
        let horseRaceLampListLength = 0;
        _this.data.horseRaceLampList.forEach((item, index) => {
          horseRaceLampListLength += item.text.length;
        })
        let horseRaceLampTextLength = horseRaceLampListLength * _this.data.size + (_this.data.horseRaceLampList.length * 80 - 20);
        let windowWidth = wx.getSystemInfoSync().windowWidth;               // 获取屏幕宽度
        _this.runMarquee(horseRaceLampTextLength, windowWidth)
      },
        /**
       * 跑马灯
       */
      runMarquee: function(horseRaceLampTextLength, windowWidth) {
        let _this = this;
        var interval = setInterval(function() {
          // 内容一直到末端
          if(-_this.data.marqueeDistance < horseRaceLampTextLength) {
            _this.setData({
              marqueeDistance: _this.data.marqueeDistance - _this.data.marqueePace
            })
          } else {
            clearInterval(interval)
            _this.setData({
              marqueeDistance: windowWidth
            })
            _this.runMarquee(horseRaceLampTextLength, windowWidth)
          }
        }, _this.data.interval)
      },
    })

以上就是跑马灯所有代码了,有什么问题可以下方留言

[20210127134842796.png]: /images/20221119/2538ad6a182e486d912e5577abef80ac.png