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> |