uniapp小程序预览多张图片
<view class="bottom_box"><view class="enclosure_box" v-if="activityData.attachmentTemplateList.length > 0"><view class="enclosure_item" v-for="(item, index) in activityData.attachmen
·
<view class="bottom_box">
<view class="enclosure_box" v-if="activityData.attachmentTemplateList.length > 0">
<view class="enclosure_item" v-for="(item, index) in activityData.attachmentTemplateList" :key="index">
<text>{{ index + 1 }}、</text>
<text>{{ item.title }}</text>
<text class="remarks_content" v-if="item.required">(必须填写并上传)</text>
<text>:</text>
<view class="preview_box" @click="previewFile(item)">点击预览</view>
<!-- <view class="preview_box" v-else @click="previewFile(item)">不可预览</view> -->
</view>
<!-- item.template 这是预览的文件 -->
</view>
<view v-else class="no_enclosure_box">暂无信息</view>
</view>
js 实现逻辑:
// 预览附件图片
previewFile(item) {
console.log(item, '预览文件', this.$url(item.template));
// 单张图片用这个
let imgList = [this.$url(item.template)]; // 预览的图片
// 多张图片采用这个
// this.timeLimitImg.forEach(item => {
// imgList.push(this.$url(item.template));
// });
uni.previewImage({
current: 1, //预览图片的下标
urls: imgList, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
loop: true
});
}
less的css样式:
.bottom_box {
.enclosure_box {
.enclosure_item {
margin-bottom: 20rpx;
.remarks_content {
color: #999999;
}
.preview_box {
display: inline-block;
width: 140rpx;
height: 40rpx;
padding: 0rpx 14rpx;
background: #e5ecf4;
color: #014497;
border-radius: 8rpx;
margin-left: 12rpx;
}
}
}
.no_enclosure_box {
width: 690rpx;
// height: 48rpx;
// line-height: 48rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
text-align: center;
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)