更新记录

1.0.0（2024-09-05） 下载此版本

自定义上下滚动的跑马灯效果。

平台兼容性

uni-app

uni-app x

参数说明

不兼容的话，自己去components改一下就行

使用方法

<template>
  <view class="content">
    <ZLMarquee :list="listArr" height="400rpx">
      <template #list="{ item }">
        <!-- 这里随便写样式 -->
        <div style="background-color: red;">{{ item.label }}</div>
      </template>
    </ZLMarquee>
  </view>
</template>

<script>
import ZLMarquee from "@/components/marquee/index.vue"
import { ref, defineComponent } from "vue";
export default defineComponent({
  components: {
    ZLMarquee
  },
  setup() {
    return {
      listArr: [{ label: '国庆1', time: '2020-10-10', day: '放7天' },
       { label: '国庆2', time: '2020-10-10', day: '放7天' }, 
       { label: '国庆3', time: '2020-10-10', day: '放7天' }, 
       { label: '国庆4', time: '2020-10-10', day: '放7天' }, 
       { label: '国庆5', time: '2020-10-10', day: '放7天' }, 
       { label: '国庆6', time: '2020-10-10', day: '放7天' }, 
       { label: '国庆4', time: '2020-10-10', day: '放7天' }, 
       { label: '国庆5', time: '2020-10-10', day: '放7天' }, 
       { label: '国庆6', time: '2020-10-10', day: '放7天' }, 
       ]
    }
  },
  methods: {

  }
})
</script>