PIUI 高质量开源组件库

# Marquee 跑马灯

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
√ √ √ √ √ √ √

提示

  1. 默认 pi-marquee-item 插槽内部的font-size: 28rpx;如果不适用，请自行在 slot item 插槽上添加样式;

  2. 横向滚动的时候，默认items的文字会拼接在一起，如果需要每项占满一行，请设置itemFullWidth

  3. pi-marquee的高度问题：

当direction = lr or rl 时，自动根据pi-marquee-item插槽内容撑开

当direction = bt or tb 时,默认高度为100%,自动撑满父容器，如果设置固定高度，slot高度超出后会自动滚动

<pi-marquee :custom-style="{height: 500px}" direction="bt" />
1

# 属性说明

items: 轮播的数组，如果不是字符串数组，则需要自行通过 slot item 插槽处理显示内容，比如对象数组，图片数组等

speed: 动画速度，表示每秒移动多少像素，默认为100

direction: 控制滚动方向 'lr' 、'rl' 或垂直方向：'tb'、'bt'

lr: left to right（从左往右）

rl: right to left（从右往左）

tb: top to bottom（从上到下）

bt: bottom to top（从下到上）

hover-pause: 默认为true 支持鼠标悬浮时暂停动画

# 示例

# 基础用法

<template>
  <pi-marquee :items="marqueeTexts" />
</template>

<script>
export default {
  data() {
    return {
      marqueeTexts: [
        '江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。'
      ]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 每项宽度占满整行 v1.2.5

<template>
  <pi-marquee :speed="20" :items="fullWidthTexts" item-full-width />
</template>

<script>
export default {
  data() {
    return {
      fullWidthTexts: [
        '江山如此多娇',
        '引无数英雄竞折腰',
        '惜秦皇汉武',
        '略输文采',
        '唐宗宋祖',
        '稍逊风骚',
        '一代天骄',
        '成吉思汗',
        '只识弯弓射大雕',
        '俱往矣',
        '数风流人物',
        '还看今朝'
      ],
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 左侧图标 v1.2.5

<template>
  <div class="pi-align-center pi-w-100P pi-of-hidden">
    <pi-icon name="notification" color="#f3ad65" size="38" />
    <div class="pi-flex-sub pi-pd-left-12">
      <pi-marquee :speed="20" :items="fullWidthTexts" item-full-width />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullWidthTexts: [
        '江山如此多娇',
        '引无数英雄竞折腰',
        '惜秦皇汉武',
        '略输文采',
        '唐宗宋祖',
        '稍逊风骚',
        '一代天骄',
        '成吉思汗',
        '只识弯弓射大雕',
        '俱往矣',
        '数风流人物',
        '还看今朝'
      ],
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 延迟2000毫秒后滚动（仅H5生效）v1.2.5

<template>
  <pi-marquee :speed="20" :items="fullWidthTexts" item-full-width run-delay="2000" />
</template>

<script>
export default {
  data() {
    return {
      fullWidthTexts: [
        '江山如此多娇',
        '引无数英雄竞折腰',
        '惜秦皇汉武',
        '略输文采',
        '唐宗宋祖',
        '稍逊风骚',
        '一代天骄',
        '成吉思汗',
        '只识弯弓射大雕',
        '俱往矣',
        '数风流人物',
        '还看今朝'
      ],
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 图片轮播

使用 pi-img slot item 标签渲染图片

<template>
  <pi-marquee :speed="60" :items="pics">
    <pi-img
      slot="item"
      slot-scope="{ item }"
      width="100%"
      height="440"
      mode="aspectFill"
      :custom-style="{ background: '#cccccc', width: 'calc(100vw - 52px)' }"
      :src="item"
    />
  </pi-marquee>
</template>

<script>
export default {
  data() {
    return {
      pics: [
        'https://img0.baidu.com/it/u=103721101,4076571305&fm=26&fmt=auto&gp=0.jpg',
        'https://img0.baidu.com/it/u=283451891,2015119390&fm=26&fmt=auto&gp=0.jpg',
        'https://img0.baidu.com/it/u=1570224879,3082274194&fm=253&fmt=auto&app=120&f=JPEG?w=432&h=288',
        'https://img2.baidu.com/it/u=1728522718,1340994382&fm=26&fmt=auto&gp=0.jpg'
      ]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

宽度问题

当水平方向轮播时，若要item与pi-marquee一样宽， 可以给slot item添加样式控制

<pi-marquee :speed="60">
  <pi-marquee :speed="60" :items="pics">
    <pi-img
      slot="item"
      slot-scope="{ item }"
      width="100%"
      height="440"
      mode="aspectFill"
      :custom-style="{ background: '#cccccc', width: 'calc(100vw - 52px)' }"
      :src="item"
    />
  </pi-marquee>
1
2
3
4
5
6
7
8
9
10
11
12

# 方向控制

可通过direction设置滚动方向

提示

当direction = 'bt' or 'tb'这种垂直方向滚动时, pi-marquee默认height: 100% 若不满足，则需通过custom-style或custom-class自行修改高度 若通过custom-class 则需添加::v-deep进行穿透

direction=bt(bottom to top)

<template>
  <pi-marquee direction="bt" :items="marqueeTexts" />
</template>

<script>
export default {
  data() {
    return {
      marqueeTexts: [
        '江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。'
      ]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 图片垂直轮播

direction=bt

<template>
 <pi-marquee custom-class="custom-height" :speed="100" direction="bt" :items="pics">
   <pi-img
     slot="item"
     slot-scope="{ item }"
     width="100%"
     height="440"
     mode="aspectFill"
     :custom-style="{ background: '#cccccc' }"
     :src="item"
   />
 </pi-marquee>
</template>

<script>
export default {
 data() {
   return {
     pics: [
       'https://img0.baidu.com/it/u=103721101,4076571305&fm=26&fmt=auto&gp=0.jpg',
       'https://img0.baidu.com/it/u=283451891,2015119390&fm=26&fmt=auto&gp=0.jpg',
       'https://img0.baidu.com/it/u=1570224879,3082274194&fm=253&fmt=auto&app=120&f=JPEG?w=432&h=288',
       'https://img2.baidu.com/it/u=1728522718,1340994382&fm=26&fmt=auto&gp=0.jpg'
     ]
   }
 }
}
</script>

<style lang="scss" scoped>
::v-deep .custom-height {
 height: 880rpx;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# Props

Name Description Type Required Default
customStyle - Object false {}
customClass 自定义样式类 String false ''
direction 控制滚动方向方向 'lr'、'rl'、'tb'、'bt' false 'rl'
speed 动画移动速度:每秒移动多少像素 Number false 100
hoverPause 是否支持鼠标移上去暂停滚动 Boolean false true
items 轮播数据 Array false []
itemFullWidth v1.2.5 每个item是否占据整个宽度 Boolean false false
runDelay v1.2.5 延迟多少毫秒后开始滚动（H5） Number false 500

# Slots

Name Description Default Slot Content
item item插槽 <view>{ item }</view>

# Methods

Method Description Parameters
handlePause 暂停动画 无
handleStart 开始动画 重新计算动画时间 无
Last updated: 2022/4/25 下午3:40:34

← Pagination-分页组件 →

10:44