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

首先看一下效果吧

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

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

组件wxml

<view class="horse-race-lamp">
  <!-- 跑马灯效果 -->
  <view class="example">
    <view class="marquee-box">
      <view class="marquee-text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
        <view class="marquee-monomer" wx:for="{{horseRaceLampList}}" wx:key="index">
          <view class="marquee-monomer-left">
            <image class="user-head"></image>
            <view class="marquee-monomer-left-desc">幸运星</view>
          </view>
          <view class="marquee-con">{{item.text}}</view>
        </view>
      </view>
    </view>
  </view>
</view>

组件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)
  },
})

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