更新记录

1.0.0(2024-09-05) 下载此版本

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


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

参数说明

参数 说明 类型
list 需要展示的数组内容 array
height 滚动的高度(默认 300rpx,也可以写 px) string
speed 滚动的速度(默认 80,数字越小滚动的越快) number
不兼容的话,自己去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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问