图片/视频预览页面开发

使用到了vant-ui中的轮播组件、图片组件

数据结构示例：

// type: 1图片   2视频
list: [{type: 1,url: 'adfdsfadsfasdf.png',},{type: 2,url: 'asdfasdfasdf.mp4',}
],item: {type: 1,url: 'adfdsfadsfasdf.png',
},

// utils/index.js/*** 图片/视频预览* @param list* @param item*/
export function previewImg(list, item) {const i = list.findIndex(e => e.url === item.url)state.$state.previewData = {list: list.filter(item => item.type * 1 === 1 || item.type * 1 === 2),active: i !== -1 ? i : 0,}// 如果只有图片和视频，就不需要这个判断了// 这个判断是type=3的时候是一个网址，点击后要跳转或打开新页面if (item.type * 1 === 3) {// window.location.href = item.url// window.location.href = valshowLoadingToast({message: '加载中...',forbidClick: true,})// 判断当前url 是否是有效的链接// 通过正则判断// const reg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/const reg = /^(http|https):\/\/([\w.]+\/?)\S*/if (reg.test(item.url)) {// alert('正确链接')// 如果是则跳转window.location.href = item.url} else {// alert('错误链接')// 否则跳转404页面uni.navigateTo({url: `/pages/404?url=${item.url}`,})}} else {uni.navigateTo({url: '/pages/previewMedia',})}
}

<template><div class="w-full h-full"><van-swipe class="w-screen h-screen" :initial-swipe="active" lazy-render><van-swipe-item v-for="(item, index) in list" :key="index"><div class="w-full h-full center bg-black" @click.stop="back"><van-imagev-if="item.type*1 === 1":src="imgJoin(item.url) || ''"class="w-screen h-screen"fit="contain"><template v-slot:loading><img src="@/assets/image/img-err.jpg" class="w-h-full" alt=""></template></van-image><videov-elseref="video":src="imgJoin(item.url) || ''"controlsloop="true"autoplay="true"class="w-full h-full"muted="true"@tap.stop></video></div></van-swipe-item><template #indicator="{ active, total }"><div class="fixed bottom-10 left-10 text-base text-white">{{ active + 1 }} / {{ total }}</div></template></van-swipe></div>
</template><script>
import { imgJoin } from '@/utils'
import useMine from '@/store/mine'
import HNavBar from '@/components/HNavBar.vue'const mineData = useMine()export default {components: { HNavBar },props: {},data() {return {list: mineData.$state.previewData.list,data: [],active: mineData.$state.previewData.active,videoPause: false,}},computed: {},watch: {},created() {},mounted() {},methods: {imgJoin,back() {uni.navigateBack()},},
}
</script><style lang="scss" scoped>
:deep(.van-nav-bar) {background: linear-gradient(180deg, black, transparent) !important;
}:deep(.van-nav-bar .van-icon) {color: white !important;
}
</style>