Fix:5448 【商城小程序】在详情图区域上传多张图片,详情图现在是一列显示,改为一行显示,可左右滑动查看图片,不自动轮播

This commit is contained in:
linxi
2026-07-14 11:12:22 +08:00
parent 47ac886d5d
commit ffadc6c501
2 changed files with 26 additions and 55 deletions
-40
View File
@@ -2258,43 +2258,3 @@ export default {
word-break: keep-all;
}
</style>
}
.gift-wrap{
position: relative;
}
.gift-bg{
position: absolute;
left: 0;
width: 100%;
}
.ll-text{
margin-left: 250rpx;
word-break: keep-all;
}
</style>
.gift-img{
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
}
.gift-wrap{
position: relative;
}
.gift-bg{
position: absolute;
left: 0;
width: 100%;
}
.ll-text{
margin-left: 250rpx;
word-break: keep-all;
}
</style>
left: 0;
width: 100%;
}
.ll-text{
margin-left: 250rpx;
word-break: keep-all;
}
</style>
@@ -74,16 +74,23 @@
<view v-if="item.address" class="section-address">
<text>定位{{ item.address }}</text>
</view>
<view v-if="item.images && item.images.length" class="image-list">
<scroll-view
v-if="item.images && item.images.length"
class="image-scroll"
scroll-x
show-scrollbar="false"
>
<view class="image-list">
<image
v-for="(img, imgIndex) in item.images"
:key="imgIndex"
:src="img"
class="detail-image"
mode="widthFix"
mode="aspectFill"
@click="previewImage(item.images, imgIndex)"
/>
</view>
</scroll-view>
</view>
<view v-if="!detailList.length" class="empty-text">暂无图文内容</view>
</view>
@@ -248,21 +255,25 @@ export default {
}
.image-list {
display: flex;
flex-wrap: wrap;
display: inline-flex;
flex-wrap: nowrap;
}
.image-scroll {
width: 100%;
margin-top: 24rpx;
white-space: nowrap;
}
.detail-image {
width: calc(50% - 8rpx);
width: 280rpx;
height: 220rpx;
margin-right: 16rpx;
margin-bottom: 16rpx;
border-radius: 16rpx;
display: block;
}
.detail-image:nth-child(2n) {
.detail-image:last-child {
margin-right: 0;
}