图片/视频预览页面开发

使用到了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>
相关推荐
weixin_4723394632 分钟前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
枯萎穿心攻击1 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue3 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762903 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
lzb_kkk5 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼5 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
简佐义的博客5 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang
Liudef066 小时前
2048小游戏实现
javascript·css·css3