图片/视频预览页面开发

使用到了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>
相关推荐
nbsaas-boot1 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7891 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨2 小时前
GO 启动 简单服务
开发语言·后端·golang
斯普信专业组2 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
我是苏苏3 小时前
C#基础:Winform桌面开发中窗体之间的数据传递
开发语言·c#
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js