轮播图

基本使用

vue

<template>
  <view class="rsbanner">
    <jp-banner :swiper-list="attribute.swiperList" style="width: 100%" @clickItem="clickItem"></jp-banner>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
  swiperList: [
    {
      img: 'http://uat.account.juepeiscm.com/static/img/login2.34a8a540.jpg'
    },
    {
      img: 'http://uat.account.juepeiscm.com/static/img/login3.3fabda5d.jpg'
    },
    {
      img: 'http://uat.account.juepeiscm.com/static/img/login1.c0089a2c.jpg'
    }
  ]
})
const clickItem = (data) => {
  console.log(data)
}
</script>

卡片样式

vue

<template>
  <jp-banner :swiper-list="attribute.swiperList" style="width: 100%" :card="true"></jp-banner>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
  swiperList: [
    {
      img: 'http://uat.account.juepeiscm.com/static/img/login2.34a8a540.jpg'
    },
    {
      img: 'http://uat.account.juepeiscm.com/static/img/login3.3fabda5d.jpg'
    },
    {
      img: 'http://uat.account.juepeiscm.com/static/img/login1.c0089a2c.jpg'
    }
  ]
})
</script>

自定义宽高比

vue

<template>
  <jp-banner :w-h="2" :swiper-list="attribute.swiperList" style="width: 100%" :card="true"></jp-banner>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
  swiperList: [
    {
      img: 'http://uat.account.juepeiscm.com/static/img/login2.34a8a540.jpg'
    },
    {
      img: 'http://uat.account.juepeiscm.com/static/img/login3.3fabda5d.jpg'
    },
    {
      img: 'http://uat.account.juepeiscm.com/static/img/login1.c0089a2c.jpg'
    }
  ]
})
</script>

props

属性列表：

属性名	类型	默认值	描述
fullScreen	Boolean	false	是否全屏
swiperList	Array	[]	滑块视图容器数据
swiperType	Boolean	false	滚动图类型（false: 全屏限高轮播图, true: 卡塔式轮播图）
videoAutoplay	Boolean	false	视频自动播放
videoKey	String	'src'	视频映射的键
imageKey	String	'img'	图片映射的键
textKey	String	'text'	文字说明映射的键
textTip	Boolean	false	图片文字说明是否显示
textStyleSize	Number	24	图片文字大小
textStyleBottom	Number	5	图片文字底部位置
textStyleRight	Number	5	图片文字右侧位置
textStyleColor	String	'#ffffff'	图片文字颜色
textStyleBgcolor	String	'transparent'	图片文字背景色
wH	Number	1	宽高比（推荐 w/h => 2）
skipHiddenItemLayout	Boolean	false	是否跳过未显示的滑块布局
displayMultipleItems	Number	1	同时显示的滑块数量
nextMargin	String	'0px'	后边距，用于露出后一项的一小部分（接受 px 和 rpx 值，头条小程序不支持）
previousMargin	String	'0px'	前边距，用于露出前一项的一小部分（接受 px 和 rpx 值，头条小程序不支持）
vertical	Boolean	false	滑动方向是否为纵向，卡牌不支持纵向以及同时显示 2 块以上滑块数量
circular	Boolean	true	是否采用衔接滑动
duration	Number	400	滑动动画时长
interval	Number	2500	自动切换时间间隔
current	Number	0	当前所在滑块的 index
autoplay	Boolean	true	是否自动切换
indicatorColor	String	'#CCCCCC'	指示点颜色
indicatorActiveColor	String	'#ffffff'	当前选中的指示点颜色
indicatorDots	Boolean	true	是否显示面板指示点
card	Boolean	false	是否采用 card 样式

事件列表：

事件名	描述
click-item	点击滑块项
change	切换滑块项
animationfinish	滑块动画结束
load-error	载入错误时的回调

轮播图 ​

基本使用 ​

卡片样式 ​

自定义宽高比 ​

props ​

轮播图

基本使用

卡片样式

自定义宽高比

props