92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="image-preview-container">
|
|||
|
|
<!-- 核心：swiper 轮播容器，实现左右滑动 -->
|
|||
|
|
<swiper
|
|||
|
|
class="swiper-box"
|
|||
|
|
:current="currentIndex"
|
|||
|
|
@change="onSwiperChange"
|
|||
|
|
:indicator-dots="false"
|
|||
|
|
>
|
|||
|
|
<!-- 遍历图片数组，生成每一张轮播项 -->
|
|||
|
|
<swiper-item v-for="(item, index) in imageList" :key="index">
|
|||
|
|
<image
|
|||
|
|
class="preview-image"
|
|||
|
|
:src="item"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
@load="onImageLoad"
|
|||
|
|
></image>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
|
|||
|
|
<!-- 自定义左上角页码指示器（1/2 样式） -->
|
|||
|
|
<view class="page-indicator">
|
|||
|
|
{{ currentIndex + 1 }} / {{ imageList.length }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "ImageSwiper",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 图片数组，替换成你的实际图片链接/本地路径
|
|||
|
|
imageList: [
|
|||
|
|
"/static/images/first.jpg", // 第一张图（对应你截图的 1/2）
|
|||
|
|
"/static/images/my.png" // 第二张图
|
|||
|
|
],
|
|||
|
|
currentIndex: 0, // 当前显示的图片索引（从0开始）
|
|||
|
|
swiperHeight: 0 // 自适应swiper高度（可选，解决高度塌陷）
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 监听swiper切换，更新当前索引
|
|||
|
|
onSwiperChange(e) {
|
|||
|
|
this.currentIndex = e.detail.current;
|
|||
|
|
},
|
|||
|
|
// 图片加载完成后，自适应swiper高度（可选，让图片完整显示）
|
|||
|
|
onImageLoad(e) {
|
|||
|
|
const { width, height } = e.detail;
|
|||
|
|
// 按屏幕宽度计算自适应高度
|
|||
|
|
const systemInfo = uni.getSystemInfoSync();
|
|||
|
|
const screenWidth = systemInfo.windowWidth;
|
|||
|
|
const ratio = height / width;
|
|||
|
|
this.swiperHeight = screenWidth * ratio;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.image-preview-container {
|
|||
|
|
position: relative; /* 让页码绝对定位生效 */
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-box {
|
|||
|
|
width: 100%;
|
|||
|
|
/* 固定高度写法（如果不需要自适应，直接写死高度） */
|
|||
|
|
/* height: 750rpx; */
|
|||
|
|
/* 自适应高度写法（根据图片高度自动适配） */
|
|||
|
|
height: v-bind(swiperHeight + 'px');
|
|||
|
|
background-color: #000; /* 图片背景黑底，更美观 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 左上角页码样式，完全匹配你截图的效果 */
|
|||
|
|
.page-indicator {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20rpx;
|
|||
|
|
left: 20rpx;
|
|||
|
|
padding: 8rpx 16rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑底 */
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
z-index: 999; /* 层级最高，不被图片遮挡 */
|
|||
|
|
}
|
|||
|
|
</style>
|