微信小程序跑马灯效果

在这里我是把它当做一个组件来用的，命名为Marquee

html代码如下

<view class="horse-race-lamp">
  <!-- 跑马灯效果 -->
  <view class="example">
    <view class="marquee-box">
      <view class="marquee-text" style="left:{{marqueeDistance}}px;">
        <view class="marquee-monomer" wx:for="{{horseRaceLampList}}" wx:key="index">
          <view class="marquee-monomer-left"><image src="{{item.head_img}}" class="marquee-img"></image></view>
          <view class="marquee-monomer-right">{{item.mobile}}:</view>
          <view class="marquee-monomer-con">{{item.info}}</view>
        </view>
      </view>
    </view>
  </view>
</view>

js代码
// components/Marquee/index.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: {

}
})

css

/* components/Marquee/index.wxss */
.horse-race-lamp {
  position: fixed;
  top: 20rpx;
  left: 0;
  z-index: 10;
}
 
.example {
  display: block;
  color: #FFFFFF;
 }
 
 .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 {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50rpx;
  padding: 5rpx 20rpx 5rpx 5rpx;
  box-sizing: border-box;
  display: flex; 
  align-items: center;
  margin-right: 30rpx;
}
 
.marquee-monomer:last-child {
  margin-right: 0;
}
 
.marquee-monomer-left {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}
.marquee-img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.marquee-monomer-right{
  font-size: 22rpx;
  color: white;
  margin-right: 10rpx;
}
.marquee-monomer-con{
  font-size: 22rpx;
  color: white;
}
 
.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": {}
}

然后在任意页面引用就好了，记住要先在json里引入

{
  "usingComponents": {
    "marquee":"../../../components/Marquee/index"
  }
}

然后在html里使用组件，传入参数

<marquee horseRaceLampList="{{horseRaceLampList}}" marqueeDistance="{{marqueeDistance}}" interval="{{interval}}"  marqueePace="{{marqueePace}}"></marquee>

js

data：{
    horseRaceLampList: [],          // 跑马灯内容
    marqueePace:1,             // 跑马灯滚动速度
    marqueeDistance: 100,           // 跑马灯初始滚动距离
    interval: 20,               // 跑马灯时间间隔
}
  // 跑马灯
  runMarquee: function(horseRaceLampTextLength, windowWidth) {
   let _this = this;
   _this.data.marqueetimer =  setInterval(function() {
     // 内容一直到末端
     if(-_this.data.marqueeDistance < horseRaceLampTextLength) {
       _this.setData({
         marqueeDistance: _this.data.marqueeDistance - _this.data.marqueePace
       })
     } else {
       clearInterval(_this.data.marqueetimer)
       _this.setData({
         marqueeDistance: windowWidth
       })
       _this.runMarquee(horseRaceLampTextLength, windowWidth)
     }
   }, _this.data.interval)
  },
  onLoad: function (options) {
    let _this = this;
    // 跑马灯
    let horseRaceLampListLength = 0;
    _this.data.horseRaceLampList.forEach((item, index) => {
      horseRaceLampListLength += item.info.length;
    })
    let horseRaceLampTextLength = horseRaceLampListLength * 14 + (_this.data.horseRaceLampList.length * 80 - 20);
    let windowWidth = wx.getSystemInfoSync().windowWidth;               // 获取屏幕宽度
    _this.runMarquee(horseRaceLampTextLength, windowWidth)
  }

效果图