今天碰到一个需求，本来使用wx.previewImage用的好好的，非要加一个关闭按钮，这可把不想写代码的我难住了，查看官方文档没有加这个按钮的属性，那就自己写了吧，自己写的途中发现胶囊隐藏不了，兴高采烈的和产品说自己写组件无法隐藏胶囊，产品说没事，哈哈，只能自己写了，代码已贴出。
先在components创建文件夹，components -> image-view -> image-view.wxml,image-view.js,image-view.js,image-view.json

<!-- <template name="imageViewer"> --><view class="image-viewer-container" bind:tap="handleClose"><swiperclass="image-viewer-swiper"autoplay="{{autoplay}}"bindchange="swiperChange"><block wx:for="{{images}}" wx:key="*this"><swiper-item><image class="image-viewer-image" src="{{item}}" mode="aspectFill" /></swiper-item></block></swiper><view class="image-viewer-close"><image bindtap="handleClose" src="../../images/home/indexClose.png" mode="" class="imageswiper" /><text>{{ currentIndex }}/{{ images.length }}</text></view></view>
<!-- </template> -->

使用template是因为想用一下，但是官方文档说传值只能使用 data 传入的数据，想着直接在data定义一个Boolean值，或者直接在页面定义一个Boolean展示这个image-view组件或者隐藏，感觉不太行没试，有时间的小伙伴可以试试。

.image-viewer-container {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 1);display: flex;justify-content: center;align-items: center;z-index: 1000;
}.image-viewer-swiper {width: 100%;height: 550rpx;
}.image-viewer-image {width: 100%;height: 100%;
}.image-viewer-close {position: absolute;top: 20px;left: 0;color: white;font-size: 18px;background-color: rgba(0, 0, 0, 0.5);padding: 5px 10px;border-radius: 5px;z-index: 1001;
}
.imageswiper {width: 54rpx;height: 54rpx;vertical-align: sub;margin-right: 200rpx;
}

{"component": true,"usingComponents": {}
}

在页面使用
previewImage 是否展示 Boolean
product.image图片的列表[string, string]
currentIndex 展示第几张第几张 number

页面的js
page({data: {previewImage: false}
})
onSwiper(e) {this.setData({previewImage: true})
},

页面的html
<image-viewer wx:if="{{ previewImage }}" images="{{ product.image }}" currentIndex="{{ currentIndex }}" bindclose="swiclose"></image-viewer>
<!-- <template is="msgItem" data="{{...item}}"/> -->

页面的json
{"usingComponents": {"image-viewer": "/components/image-viewer/image-viewer"},
}

还想使用js写一个，也写一个代码,这段代码实现了基本的滑动查看功能，用户可以通过点击左右滑按钮来查看前后的图片，也可以通过触摸屏设备进行滑动查看。currentIndex变量用于跟踪当前显示的图片。goToSlide函数用于更新图片位置，slideLeft和slideRight分别用于处理左右滑动的逻辑。

<div id="gallery"><div class="image-container"><img src="image1.jpg" alt="Image 1" class="slide" style="left: 0;"><img src="image2.jpg" alt="Image 2" class="slide" style="left: 100%;"><img src="image3.jpg" alt="Image 3" class="slide" style="left: 200%;"><!-- 更多图片 --></div><!-- 控制按钮 --><button onclick="slideLeft()">左滑</button><button onclick="slideRight()">右滑</button>
</div>

#gallery {overflow: hidden;position: relative;width: 300px; /* 设置为图片宽度 */height: 200px; /* 设置为图片高度 */
}
.image-container {position: absolute;width: 300%; /* 所有图片宽度的3倍 */
}
.slide {position: absolute;width: 300px; /* 图片宽度 */height: 200px; /* 图片高度 */transition: left 0.3s ease-in-out;
}

const container = document.querySelector('.image-container');
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;function slideLeft() {goToSlide(currentIndex - 1);
}function slideRight() {goToSlide(currentIndex + 1);
}function goToSlide(index) {if (index < 0 || index >= slides.length) return;slides[currentIndex].style.left = `${100 * index}%`;currentIndex = index;
}// 监听触摸事件进行滑动查看
let startX, endX;
container.addEventListener('touchstart', function(e) {startX = e.touches[0].clientX;
});container.addEventListener('touchend', function(e) {endX = e.changedTouches[0].clientX;if (endX - startX > 0) {slideLeft(); // 向左滑动} else {slideRight(); // 向右滑动}
});