| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <template>
- <view class="demo-swiper">
- <demo-block title="基础用法">
- <z-swiper v-model="list" :options="{autoplay:true}">
- <z-swiper-item v-for="(item,index) in list" :key="index">
- <demo-item :item="item"></demo-item>
- </z-swiper-item>
- </z-swiper>
- </demo-block>
- <demo-block title="时间间隔">
- <z-swiper v-model="list" :options="{ autoplay: {delay: 1000}}">
- <z-swiper-item v-for="(item,index) in list" :key="index">
- <demo-item :item="item"></demo-item>
- </z-swiper-item>
- </z-swiper>
- </demo-block>
- <demo-block title="自动停止">
- <z-swiper v-model="list" :options="{ autoplay: {stopOnLastSlide: true}}">
- <z-swiper-item v-for="(item,index) in list" :key="index">
- <demo-item :item="item"></demo-item>
- </z-swiper-item>
- </z-swiper>
- </demo-block>
- <demo-block title="无限循环">
- <z-swiper v-model="loopList" :options="{ autoplay:true,loop:true}">
- <z-swiper-item v-for="(item,index) in loopList" :key="index">
- <demo-item :item="item"></demo-item>
- </z-swiper-item>
- </z-swiper>
- </demo-block>
- <demo-block title="反向">
- <z-swiper v-model="list" :options="{ autoplay: {reverseDirection: true}}">
- <z-swiper-item v-for="(item,index) in list" :key="index">
- <demo-item :item="item"></demo-item>
- </z-swiper-item>
- </z-swiper>
- </demo-block>
- </view>
- </template>
- <script>
- import data from '../../common/js/data.js'
- export default {
- data() {
- return {
- list: data,
- loopList: data,
- }
- }
- }
- </script>
|