| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- <template>
- <view class="demo-swiper">
- <demo-block title="切换效果-3D翻转">
- <z-swiper v-model="list" :options="options">
- <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="optionsAutoplay">
- <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" :custom-style="{height:'300rpx'}" :options="optionsVertical">
- <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="optionsLoop">
- <z-swiper-item v-for="(item,index) in loopList
- " :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 {
- options: {
- effect: 'flip'
- },
- optionsAutoplay: {
- effect: 'flip',
- autoplay: true
- },
- optionsVertical: {
- effect: 'flip',
- direction: 'vertical'
- },
- optionsLoop: {
- effect: 'flip',
- loop: true
- },
- list: data,
- loopList: data,
- }
- },
- }
- </script>
|