feat: 商品详情交互开发

components/ImageSwiper/demo.vue

@@ -53,6 +53,54 @@
       </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>
 
@@ -63,6 +111,12 @@ import ImageSwiper from './index.vue'
 // 动态圆角控制
 const dynamicRadius = ref(8)
 
+// 动态高度控制
+const dynamicHeight = ref(200)
+
+// 缩略图显示控制
+const showThumbnails = ref(true)
+
 // 自定义图片数据
 const customImages = ref([
   {
@@ -97,6 +151,16 @@ const manyImages = ref([
 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">
@@ -148,4 +212,16 @@ const handleRadiusChange = (e) => {
 slider {
   width: 100%;
 }
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  margin-top: 20rpx;
+}
+
+.checkbox-label {
+  margin-left: 16rpx;
+  font-size: 24rpx;
+  color: #666;
+}
 </style>