mp-banner 轮播图

支持 image、video、gif 多种格式

介绍文档：轮播图

代码演示

<mp-banner :data="banner" height="100vw" />

完整示例

Click me to view the code

<script setup>
import {useQuery, useWatchLoading} from '@ifanrx/uni-mp'
import {ref} from 'vue'

import io from '../../io'

const {data: banner, isFetching} = useQuery(() => io.banner.find({orderBy: '-priority'}))

useWatchLoading(isFetching)

// uni-data-checkbox 不支持接收 Boolean value
const BOOLEAN_OPTIONS = [
  {text: '是', value: 1},
  {text: '否', value: 0},
]

const autoplay = ref(1)
const showDecoration = ref(1)
const circular = ref(1)
const interval = ref(3000)

function onIntervalChange(e) {
  interval.value = e.detail.value
}
</script>

<template>
  <mp-nav-bar title="mp-banner" />

  <view class="page">
    <mp-banner
      :autoplay="!!autoplay"
      :circular="!!circular"
      :data="banner"
      height="100vw"
      :interval="interval"
    >
      <template v-if="showDecoration" #decoration="{current}">
        <view class="indicator-dots">
          <view
            v-for="(item, index) in banner"
            :key="item.id"
            :class="['indicator-dot', {'indicator-dot__active': current === index}]"
          />
        </view>
        <image
          class="logo"
          src="https://cloud-minapp-47018.cloud.ifanrusercontent.com/1qq2VDGFV8Norhxp.png"
        />

        <image
          class="banner-footer"
          src="https://cloud-minapp-47018.cloud.ifanrusercontent.com/1qq2QXX7Z2DZpoYo.png"
        />
      </template>
    </mp-banner>

    <uni-section title="自动播放" type="line">
      <view class="mx10">
        <uni-data-checkbox v-model="autoplay" :localdata="BOOLEAN_OPTIONS" />
      </view>
    </uni-section>

    <uni-section title="循环播放" type="line">
      <view class="mx10">
        <uni-data-checkbox v-model="circular" :localdata="BOOLEAN_OPTIONS" />
      </view>
    </uni-section>

    <uni-section title="播放间隔" type="line">
      <view class="mx10">
        <slider
          :max="8000"
          :min="1000"
          showValue
          step="500"
          :value="interval"
          @change="onIntervalChange"
        />
      </view>
    </uni-section>

    <uni-section title="使用装饰器插槽" type="line">
      <view class="mx10">
        <uni-data-checkbox v-model="showDecoration" :localdata="BOOLEAN_OPTIONS" />
      </view>
    </uni-section>
  </view>
</template>

<style scoped>
.page {
  padding-bottom: 20rpx;
}

.banner-container {
  width: 100vw;
  height: 100vw;
}

.indicator-dots {
  position: absolute;
  bottom: 162rpx;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}

.indicator-dot {
  width: 14rpx;
  height: 14rpx;
  margin-left: 16rpx;
  background: rgb(255 255 255 / 50%);
  border-radius: 8rpx;
  transition: all 0.3s linear;
}

.indicator-dot__active {
  width: 48rpx;
  background: #fff;
}

.indicator-dot:first-child {
  margin-left: 0;
}

.logo {
  position: absolute;
  top: 50rpx;
  left: 50%;
  width: 107rpx;
  height: 88rpx;
  transform: translateX(-50%);
}

.banner-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 244rpx;
}

.mx10 {
  margin-right: 10rpx;
  margin-left: 10rpx;
}
</style>

API

Props

Prop name	Description	Type	Values	Default
data	轮播图数据列表，详见 轮播图	array	-	[]
width	轮播图宽度	string	-	'auto'
height	轮播图高度，默认与 swiper 高度一致 150px	string	-	'150px'
webviewPath	当跳转类型为 webview 时，需要跳转的页面路径，可根据项目情况进行配置	string	-	'/pages/webview/index'
indicatorDots	swiper 属性，详见官方文档	boolean	-	false
indicatorColor	swiper 属性，详见官方文档	string	-	'rgba(0, 0, 0, 0.3)'
indicatorActiveColor	swiper 属性，详见官方文档	string	-	'#000000'
disableTouch	swiper 属性，详见官方文档	boolean	-	false
autoplay	swiper 属性，详见官方文档 注意：若当前 banner 类型为视频，则不受 interval 影响，会等到视频播放结束再进入下一页	boolean	-	false
interval	swiper 属性，详见官方文档	number	-	3000
currentItemId	swiper 属性，详见官方文档	string|undefined	-	undefined
circular	swiper 属性，详见官方文档	boolean	-	false
vertical	swiper 属性，详见官方文档	boolean	-	false

Expose

next

() => void

切换到上一页轮播图

previous

() => void

切换到下一页轮播图

slide

(target: number) => void

切换到任一分页

Slots

Name	Description	Bindings
image	自定义 image 类型的 banner 渲染，不传时使用内置样式	active boolean - active 为 true 时表示正在播放该轮播图 banner object - 该轮播图的配置内容，与传入的 data item 结构一致 next () => void - 跳转到下一页轮播图 previous () => void - 跳转到上一页轮播图
gif	自定义 gif 类型的 banner 渲染，不传时使用内置样式	active boolean - active 为 true 时表示正在播放该轮播图 banner object - 该轮播图的配置内容，与传入的 data item 结构一致 next () => void - 跳转到下一页轮播图 previous () => void - 跳转到上一页轮播图
video	自定义 video 类型的 banner 渲染，不传时使用内置样式	active boolean - active 为 true 时表示正在播放该轮播图 banner object - 该轮播图的配置内容，与传入的 data item 结构一致 next () => void - 跳转到下一页轮播图 previous () => void - 跳转到上一页轮播图
decoration	给 banner 增加装饰器，比如自定义 indicator dots，原理是增加一个层级更高的视图到 swiper 上	current number - 当前播放轮播图的索引

源码

组件 • 示例