Carousel 走马灯

提供 wx-carousel 和 wx-carousel-item 两个组件。

基本用法

<wx-carousel height="150px">
  <wx-carousel-item v-for="i in 4" :key="i">
    <h3>{{i}}</h3>
  </wx-carousel-item>
</wx-carousel>

<style>
.weui-carousel__item h3 {
    color: #fff;
    font-size: 32px;
    line-height: 150px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #39a9ed;
}
</style>

提示

通过 height 属性设置走马灯的高度。

高宽比/附带标题/图片适配

高宽比（aspect-ratio)：走马灯容器的宽度与高度比例，通过设置高宽比适配不同大小的手机设备

<wx-carousel :aspect-ratio=".5">
  <wx-carousel-item title="秋裤上架" :img="img1"></wx-carousel-item>
  <wx-carousel-item :img="img2">
    <!-- 自定义标题 -->
    <template #title>秋冬新时尚</template>
  </wx-carousel-item>
  <wx-carousel-item title="咖啡大放价" :img="img3"></wx-carousel-item>
</wx-carousel>

<script>
import img1 from "../assets/c1.jpg";
import img2 from "../assets/c2.jpg";
import img3 from "../assets/c3.jpg";
export default {
  data() {
    return {
      img1,
      img2,
      img3
    };
  }
};
</script>

注意

图片适配，采用 cover 方式自动适配

默认值/不滚动/事件绑定

通过 v-model 绑定走马灯初始值。

<wx-carousel height="150px" :autoplay="false" v-model="c1">
  <wx-carousel-item v-for="i in 4" :key="i" @click="handleClick">
    <h3>{{i}}</h3>
  </wx-carousel-item>
</wx-carousel>

<script>
export default {
  data() {
    return {
      c1: 1
    };
  },
  methods: {
    handleClick() {
      this.$toast("got!");
    }
  }
};
</script>

切换事件

<wx-divider>change事件: 索引-{{c2}}</wx-divider>
<wx-carousel height="150px" @change="handleChange">
  <wx-carousel-item v-for="i in 4" :key="i">
    <h3>{{i}}</h3>
  </wx-carousel-item>
</wx-carousel>

<script>
export default {
  data() {
    return {
      c2: 0
    };
  },
  methods: {
    handleChange(index) {
      this.c2 = index;
    }
  }
};
</script>

纵向滚动/无指示器

<wx-carousel height="40px" direction="vertical" :indicator="false">
  <wx-carousel-item v-for="(title, index) in data" :key="index">
    <span>{{title}}</span>
  </wx-carousel-item>
</wx-carousel>

<script>
export default {
  data() {
    return {
      data: [
        "遵循weui的视觉设计规范，简洁美观",
        "丰富的组件和API，适用各种应用场景",
        "组件简单易用，并保持灵活度和规范性",
        "支持主题定制，满足个性化需求",
        "提供整套的移动应用开发框架，降低开发成本"
      ]
    };
  }
};
</script>

Carousel Attributes

参数	说明	类型	可选值	默认值
v-model/value	绑定值，即索引值	Number	-	0
autoplay	是否自动切换	Boolean	-	true
loop	是否循环展示	Boolean	-	true
interval	自动切换的时间间隔，单位为毫秒	Number	-	3000
height	走马灯的高度	String	-	auto
aspectRatio	走马灯容器的宽度与高度比例	Number	0~1	-
direction	走马灯的切换方向	String	horizontal/vertical	horizontal
indicator	是否显示指示器	Boolean	-	true

Carousel Events

事件名称	说明	回调参数
change	走马灯切换时触发	index: 索引值

Carousel-item Attributes

参数	说明	类型	可选值	默认值
img	图片地址或图片base64	String	-	-
title	幻灯片标题，空值即不显示	String	-	-

Carousel-item Events

事件名称	说明	回调参数
*	自定义绑定事件，支持所有类型事件	event: Event

Carousel-item Slots

插槽名称	说明
default	幻灯片主体内容
title	幻灯片标题内容

走马灯