mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
269 lines
7.5 KiB
Vue
269 lines
7.5 KiB
Vue
<template>
|
|
<page-wraper>
|
|
<demo-block :title="$t('dian-zhuang-zhi-shi-qi')">
|
|
<wd-swiper
|
|
:list="swiperList"
|
|
autoplay
|
|
v-model:current="current"
|
|
:indicator="{ type: 'dots' }"
|
|
@click="handleClick"
|
|
@change="onChange"
|
|
></wd-swiper>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('dian-tiao-zhuang-zhi-shi-qi')">
|
|
<wd-swiper
|
|
:list="swiperList"
|
|
autoplay
|
|
v-model:current="current1"
|
|
:indicator="{ type: 'dots-bar' }"
|
|
@click="handleClick"
|
|
@change="onChange"
|
|
></wd-swiper>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('shu-zi-zhi-shi-qi')">
|
|
<wd-swiper
|
|
:list="swiperList"
|
|
autoplay
|
|
v-model:current="current2"
|
|
:indicator="{ type: 'fraction' }"
|
|
indicator-position="bottom-right"
|
|
@click="handleClick"
|
|
@change="onChange"
|
|
></wd-swiper>
|
|
</demo-block>
|
|
|
|
<!-- #ifdef MP-WEIXIN || H5 || MP-DINGTALK -->
|
|
<demo-block :title="$t('shi-pin-lun-bo')">
|
|
<wd-swiper
|
|
:list="videoList"
|
|
autoplay
|
|
:indicator="{ type: 'fraction' }"
|
|
indicator-position="top-right"
|
|
@click="handleClick"
|
|
@change="onChange"
|
|
></wd-swiper>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('shou-dong-bo-fang-shi-pin')">
|
|
<wd-swiper
|
|
:list="videoList"
|
|
autoplay
|
|
:autoplayVideo="false"
|
|
:indicator="{ type: 'fraction' }"
|
|
indicator-position="top-right"
|
|
@click="handleClick"
|
|
@change="onChange"
|
|
></wd-swiper>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('bo-fang-shi-pin-shi-ting-zhi-lun-bo')">
|
|
<wd-swiper
|
|
:list="videoList"
|
|
autoplay
|
|
stopAutoplayWhenVideoPlay
|
|
:autoplayVideo="false"
|
|
:indicator="{ type: 'fraction' }"
|
|
indicator-position="top-right"
|
|
@click="handleClick"
|
|
@change="onChange"
|
|
></wd-swiper>
|
|
</demo-block>
|
|
<!-- #endif -->
|
|
|
|
<demo-block :title="$t('shou-dong-qie-huan')">
|
|
<wd-swiper
|
|
:list="swiperList"
|
|
:autoplay="false"
|
|
v-model:current="current3"
|
|
:indicator="{ showControls: true }"
|
|
:loop="false"
|
|
@click="handleClick"
|
|
@change="onChange"
|
|
></wd-swiper>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('ka-pian-yang-shi')">
|
|
<view class="card-swiper">
|
|
<wd-swiper
|
|
autoplay
|
|
v-model:current="current4"
|
|
custom-indicator-class="custom-indicator-class"
|
|
custom-image-class="custom-image"
|
|
custom-next-image-class="custom-image-prev"
|
|
custom-prev-image-class="custom-image-prev"
|
|
:indicator="{ type: 'dots' }"
|
|
:list="swiperList"
|
|
previousMargin="24px"
|
|
nextMargin="24px"
|
|
></wd-swiper>
|
|
</view>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('tong-shi-zhan-shi-2-ge-hua-kuai')">
|
|
<view class="card-swiper">
|
|
<wd-swiper
|
|
autoplay
|
|
v-model:current="current5"
|
|
:display-multiple-items="2"
|
|
custom-indicator-class="custom-indicator-class"
|
|
custom-image-class="custom-image"
|
|
custom-next-image-class="custom-image-prev"
|
|
custom-prev-image-class="custom-image-prev"
|
|
:indicator="{ type: 'dots' }"
|
|
:list="swiperList"
|
|
previousMargin="24px"
|
|
nextMargin="24px"
|
|
></wd-swiper>
|
|
</view>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('chui-zhi-fang-xiang')">
|
|
<wd-swiper
|
|
:list="swiperList"
|
|
direction="vertical"
|
|
indicator-position="right"
|
|
autoplay
|
|
v-model:current="current6"
|
|
:indicator="{ type: 'dots-bar' }"
|
|
@click="handleClick"
|
|
@change="onChange"
|
|
></wd-swiper>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('zi-ding-yi-zhi-shi-qi')">
|
|
<wd-swiper
|
|
:list="swiperList"
|
|
direction="vertical"
|
|
indicator-position="right"
|
|
autoplay
|
|
v-model:current="current7"
|
|
@click="handleClick"
|
|
@change="onChange"
|
|
>
|
|
<template #indicator="{ current, total }">
|
|
<view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">{{ current + 1 }}/{{ total }}</view>
|
|
</template>
|
|
</wd-swiper>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('zhi-ding-valuekey-he-textkey')">
|
|
<wd-swiper
|
|
value-key="url"
|
|
text-key="title"
|
|
:list="customSwiperList"
|
|
autoplay
|
|
v-model:current="current9"
|
|
@click="handleClick"
|
|
@change="onChange"
|
|
></wd-swiper>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('shu-xing-kong-zhi-qie-huan')">
|
|
<wd-swiper :loop="isLoop" :autoplay="false" :list="swiperList" v-model:current="current8" />
|
|
<wd-gap />
|
|
<wd-cell-group>
|
|
<wd-cell title="loop">
|
|
<wd-switch v-model="isLoop" size="24px" />
|
|
</wd-cell>
|
|
<wd-cell title="current" :value="current8.toString()" />
|
|
</wd-cell-group>
|
|
<view style="display: flex; justify-content: space-between">
|
|
<wd-button @click="current8--">prev</wd-button>
|
|
|
|
<wd-button type="success" @click="current8++">next</wd-button>
|
|
</view>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('cha-cao-yong-fa')">
|
|
<wd-swiper :list="swiperList" autoplay v-model:current="current1" :indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange">
|
|
<template #default="{ item }">
|
|
<image :src="item as string" mode="aspectFill" style="width: 100%; height: 100%" />
|
|
</template>
|
|
</wd-swiper>
|
|
</demo-block>
|
|
</page-wraper>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const swiperList = ref([
|
|
'https://wot-ui.cn/assets/redpanda.jpg',
|
|
'https://wot-ui.cn/assets/capybara.jpg',
|
|
'https://wot-ui.cn/assets/panda.jpg',
|
|
'https://wot-ui.cn/assets/moon.jpg',
|
|
'https://wot-ui.cn/assets/meng.jpg'
|
|
])
|
|
|
|
const customSwiperList = ref([
|
|
{ url: 'https://wot-ui.cn/assets/redpanda.jpg', title: t('xiao-xiong-mao') },
|
|
{ url: 'https://wot-ui.cn/assets/capybara.jpg', title: t('ka-pi-ba-la') },
|
|
{ url: 'https://wot-ui.cn/assets/panda.jpg', title: t('da-xiong-mao') },
|
|
{ url: 'https://wot-ui.cn/assets/moon.jpg', title: t('shi-hua-zhong-guo') }
|
|
])
|
|
|
|
const videoList = ref([
|
|
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
|
|
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4',
|
|
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4',
|
|
'https://wot-ui.cn/assets/moon.jpg'
|
|
])
|
|
|
|
const current = ref<number>(0)
|
|
const current1 = ref<number>(1)
|
|
const current2 = ref<number>(2)
|
|
const current3 = ref<number>(3)
|
|
const current4 = ref<number>(4)
|
|
const current5 = ref<number>(0)
|
|
const current6 = ref<number>(0)
|
|
const current7 = ref<number>(0)
|
|
const current8 = ref<number>(0)
|
|
const current9 = ref<number>(0)
|
|
|
|
const isLoop = ref(false)
|
|
|
|
function handleClick(e: any) {
|
|
console.log(e)
|
|
}
|
|
function onChange(e: any) {
|
|
console.log(e)
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.card-swiper {
|
|
--wot-swiper-radius: 0;
|
|
--wot-swiper-item-padding: 0 24rpx;
|
|
--wot-swiper-nav-dot-color: #e7e7e7;
|
|
--wot-swiper-nav-dot-active-color: #4d80f0;
|
|
padding-bottom: 24rpx;
|
|
:deep(.custom-indicator-class) {
|
|
bottom: -16px;
|
|
}
|
|
:deep(.custom-image) {
|
|
border-radius: 12rpx;
|
|
}
|
|
:deep(.custom-image-prev) {
|
|
height: 168px !important;
|
|
}
|
|
}
|
|
|
|
.custom-slot-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.custom-indicator {
|
|
padding: 0 12rpx;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
border-radius: 45%;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
color: #ffffff;
|
|
font-size: 24rpx;
|
|
}
|
|
</style>
|