图片/视频预览页面开发

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

数据结构示例：

javascript 复制代码

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

item: {
	type: 1,
	url: 'adfdsfadsfasdf.png',
},

javascript 复制代码

// 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 = val
		showLoadingToast({
			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',
		})
	}
}

javascript 复制代码

<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-image
            v-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>
          <video
            v-else
            ref="video"
            :src="imgJoin(item.url) || ''"
            controls
            loop="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>