227 lines
6.4 KiB
Vue
227 lines
6.4 KiB
Vue
<template>
|
|
<view class="demo-container">
|
|
<view class="demo-title">ImageSwiper 轮播图组件演示</view>
|
|
|
|
<!-- 示例1: 默认圆角 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例1: 默认圆角 (8px)</view>
|
|
<ImageSwiper />
|
|
</view>
|
|
|
|
<!-- 示例2: 无圆角 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例2: 无圆角 (0px)</view>
|
|
<ImageSwiper :border-radius="0" />
|
|
</view>
|
|
|
|
<!-- 示例3: 大圆角 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例3: 大圆角 (20px)</view>
|
|
<ImageSwiper :border-radius="20" />
|
|
</view>
|
|
|
|
<!-- 示例4: 字符串圆角 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例4: 字符串圆角 (1rem)</view>
|
|
<ImageSwiper border-radius="1rem" />
|
|
</view>
|
|
|
|
<!-- 示例5: 自定义图片数据 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例5: 自定义图片数据 + 圆角15px</view>
|
|
<ImageSwiper :border-radius="15" :images="customImages" />
|
|
</view>
|
|
|
|
<!-- 示例7: 多图片测试滑动 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例7: 多图片测试缩略图滑动</view>
|
|
<ImageSwiper :border-radius="10" :images="manyImages" />
|
|
</view>
|
|
|
|
<!-- 示例6: 动态圆角控制 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例6: 动态圆角控制</view>
|
|
<view class="control-panel">
|
|
<text>圆角大小: {{ dynamicRadius }}px</text>
|
|
<slider
|
|
:value="dynamicRadius"
|
|
:min="0"
|
|
:max="50"
|
|
@change="handleRadiusChange"
|
|
activeColor="#007AFF"
|
|
/>
|
|
</view>
|
|
<ImageSwiper :border-radius="dynamicRadius" />
|
|
</view>
|
|
|
|
<!-- 示例8: 自定义高度 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例8: 自定义高度 (300px)</view>
|
|
<ImageSwiper :height="300" :border-radius="12" />
|
|
</view>
|
|
|
|
<!-- 示例9: 小高度轮播图 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例9: 小高度轮播图 (120px)</view>
|
|
<ImageSwiper :height="120" :border-radius="8" />
|
|
</view>
|
|
|
|
<!-- 示例10: 隐藏缩略图 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例10: 隐藏缩略图</view>
|
|
<ImageSwiper :show-thumbnails="false" :border-radius="15" />
|
|
</view>
|
|
|
|
<!-- 示例11: 动态高度和缩略图控制 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例11: 动态高度和缩略图控制</view>
|
|
<view class="control-panel">
|
|
<text>高度: {{ dynamicHeight }}px</text>
|
|
<slider
|
|
:value="dynamicHeight"
|
|
:min="100"
|
|
:max="400"
|
|
@change="handleHeightChange"
|
|
activeColor="#007AFF"
|
|
/>
|
|
<view class="checkbox-wrapper">
|
|
<checkbox :checked="showThumbnails" @change="handleThumbnailToggle" />
|
|
<text class="checkbox-label">显示缩略图</text>
|
|
</view>
|
|
</view>
|
|
<ImageSwiper
|
|
:height="dynamicHeight"
|
|
:show-thumbnails="showThumbnails"
|
|
:border-radius="10"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 示例12: 字符串高度 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">示例12: 字符串高度 (50vh)</view>
|
|
<ImageSwiper height="50vh" :border-radius="20" :show-thumbnails="false" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import ImageSwiper from './index.vue'
|
|
|
|
// 动态圆角控制
|
|
const dynamicRadius = ref(8)
|
|
|
|
// 动态高度控制
|
|
const dynamicHeight = ref(200)
|
|
|
|
// 缩略图显示控制
|
|
const showThumbnails = ref(true)
|
|
|
|
// 自定义图片数据
|
|
const customImages = ref([
|
|
{
|
|
photoUrl: "https://fastly.picsum.photos/id/100/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
|
|
photoName: "自定义图片1",
|
|
},
|
|
{
|
|
photoUrl: "https://fastly.picsum.photos/id/200/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
|
|
photoName: "自定义图片2",
|
|
},
|
|
{
|
|
photoUrl: "https://fastly.picsum.photos/id/300/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
|
|
photoName: "自定义图片3",
|
|
}
|
|
])
|
|
|
|
// 多图片数据，用于测试缩略图滑动
|
|
const manyImages = ref([
|
|
{ photoUrl: "https://fastly.picsum.photos/id/10/654/400.jpg", photoName: "风景1" },
|
|
{ photoUrl: "https://fastly.picsum.photos/id/20/654/400.jpg", photoName: "风景2" },
|
|
{ photoUrl: "https://fastly.picsum.photos/id/30/654/400.jpg", photoName: "风景3" },
|
|
{ photoUrl: "https://fastly.picsum.photos/id/40/654/400.jpg", photoName: "风景4" },
|
|
{ photoUrl: "https://fastly.picsum.photos/id/50/654/400.jpg", photoName: "风景5" },
|
|
{ photoUrl: "https://fastly.picsum.photos/id/60/654/400.jpg", photoName: "风景6" },
|
|
{ photoUrl: "https://fastly.picsum.photos/id/70/654/400.jpg", photoName: "风景7" },
|
|
{ photoUrl: "https://fastly.picsum.photos/id/80/654/400.jpg", photoName: "风景8" },
|
|
{ photoUrl: "https://fastly.picsum.photos/id/90/654/400.jpg", photoName: "风景9" },
|
|
{ photoUrl: "https://fastly.picsum.photos/id/110/654/400.jpg", photoName: "风景10" }
|
|
])
|
|
|
|
// 处理圆角变化
|
|
const handleRadiusChange = (e) => {
|
|
dynamicRadius.value = e.detail.value
|
|
}
|
|
|
|
// 处理高度变化
|
|
const handleHeightChange = (e) => {
|
|
dynamicHeight.value = e.detail.value
|
|
}
|
|
|
|
// 处理缩略图显示切换
|
|
const handleThumbnailToggle = (e) => {
|
|
showThumbnails.value = e.detail.value
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.demo-container {
|
|
padding: 20rpx;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.demo-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.demo-section {
|
|
margin-bottom: 60rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 20rpx;
|
|
color: #333;
|
|
border-left: 6rpx solid #007AFF;
|
|
padding-left: 16rpx;
|
|
}
|
|
|
|
.control-panel {
|
|
margin-bottom: 30rpx;
|
|
padding: 20rpx;
|
|
background: #f8f9fa;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.control-panel text {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
slider {
|
|
width: 100%;
|
|
}
|
|
|
|
.checkbox-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.checkbox-label {
|
|
margin-left: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
</style> |