使用到了vant-ui中的轮播组件、图片组件
数据结构示例:
list: [{type: 1,url: 'adfdsfadsfasdf.png',},{type: 2,url: 'asdfasdfasdf.mp4',}
],item: {type: 1,url: 'adfdsfadsfasdf.png',
},
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,}if (item.type * 1 === 3) {showLoadingToast({message: '加载中...',forbidClick: true,})const reg = /^(http|https):\/\/([\w.]+\/?)\S*/if (reg.test(item.url)) {window.location.href = item.url} else {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>