原生小程序封装跑马灯(由多条衔接改动得到)

Marquee.wxml

<view class="marquee_container " style="background:{
     {broadcast_arr.back_color}};font-size:32rpx;">
	<view class='marquee_text' style='--marqueeWidth--:{
     {-broadcast_arr.width_mal}}px;--speed--:{
     {broadcast_arr.time}}s;width:{
     {broadcast_arr.width_mal}}px;'>
		<block wx:for="{
     {data}}" wx:key='index'>
			<view style='color:{
     {broadcast_arr.text_color}};margin-left:{
     {index!=0?item.starspos*2:0}}rpx;'>
				{
     {
     item.img}}
			</view>
		</block>
	</view>
</view>

Marquee.wxss

@keyframes around {
     
  from {
     
    margin-left: 100%;
  }

  to {
     
    margin-left: var(--marqueeWidth--);
  }
}

.marquee_container {
     
  /* background-color: #0099FF; */
  padding: 12rpx 0;
  position: relative;
  width: 100%;
  /* height: 50rpx; */

}

.marquee_text {
     
  display: flex;
  white-space: nowrap;
  animation-name: around;
  animation-duration: var(--speed--);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  line-height: 50rpx;
}

.marquee_tit {
     
  height: 50rpx;
  line-height: 50rpx;
  position: absolute;
  padding-left: 22rpx;
}

Marquee.js

Component({
     
  options: {
     
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
     
    title: {
                 // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题' ,    // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function (newVal) {
     
        this.setData({
     
          'data[0].img': newVal
        })
        this.run()
      }
    }
  },
  data: {
     
    data: [
      {
     
        img: "",
      }
    ],
    broadcast_arr: {
     
      speed: 5, //滚动速度，每秒5个字
      font_size: "16", //字体大小(px)
      text_color: "#de8c17", //字体颜色
      back_color: "#fffbe8", //背景色
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  methods: {
     
    run() {
     
      let ititdata = this.data.data,
        assist = this.data.broadcast_arr,
        this_width = 0,
        spacing = 0,
        speed = (this.data.broadcast_arr.speed * this.data.broadcast_arr.font_size); //m每秒行走的距离

      for (let i in ititdata) {
     
        ititdata[i].starspos = wx.getSystemInfoSync().windowWidth; //以取屏幕宽度为间距
        this_width += (ititdata[i].img.length-12) * this.data.broadcast_arr.font_size;
        if (i != ititdata.length - 1) {
     
          spacing += ititdata[i].starspos
        }
      }
      let total_length = this_width + spacing;//总长
      assist.time = total_length / speed; /**滚动时间*/
      assist.width_mal = total_length;
      this.setData({
     
        broadcast_arr: assist,
        data: ititdata
      })
    }
  }
})

index引入—index.json

{
     
	"usingComponents": {
     
		"marquee":"/components/Marquee/Marquee"
	},

index.wxml

	<!--跑马灯 Linyufan.com-->
		<marquee id='marquee' title='江龙：每日惠自提店铺特价啦~店铺特价啦~店铺特价啦~'></marquee>
	<!--跑马灯-->

index.js

	onReady:function(){
     
		this.marquee=this.selectComponent('#marquee')
		this.marquee.run()
	},