1. 实现图片预览主要代码:
<ul v-if="index == 0" class="collapse-sty">
<li v-for="img in imageList">
<u-image width="200rpx" height="200rpx" @click="previewImage(img)" :src="getBaseUrl() + img.url"></u-image>
</li>
</ul>
previewImage(val) {
if (val) {
let imageURL = this.getBaseUrl() + val.url
uni.previewImage({
current: imageURL, // 当前显示图片的 http 链接
urls: [imageURL] // 需要预览的图片 http 链接列表
});
}
},
效果图:
2. 实现视频预览主要代码:
<ul v-if="index == 2" class="collapse-sty">
<li v-for="video in videoList">
<video :src="getBaseUrl() + video.url" class="my-Video"></video>
</li>
</ul>
效果图:
3. 实现音频预览主要代码:
<ul v-if="index == 1" class="collapse-sty">
<li v-for="audio in radioList" style="width: 100%;">
<free-audio startPic='/static/images/play.png' endPic='/static/images/stop.png' :url='getBaseUrl() + audio.url'></free-audio>
</li>
</ul>
import freeAudio from '@/components/free-audio/free-audio.vue'
components: {
freeAudio
},
效果图: