uniapp如何是实现网页内上下多个video视频滚动到可视范围自动播放？
网友回复
uniapp新建组件lazyload.vue
<template>
<view class="lazy-content" :style="{
width,
height,
}">
<!-- 加载中 -->
<image :src="loadSrc" class="lazy-image lazy-load" @load="init" mode="aspectFill" :style="{
opacity:isShow?'0':'1',
borderRadius,
width,
height,
transition: `opacity ${duration/1000}s ${effect}`
}"></image>
<!-- 加载成功 -->
<image class="lazy-image" @load="load" @error="error" v-if="status==1" :src="src" mode="aspectFill" :style="{
opacity:isShow?'1':'0',
borderRadius,
width,
height,
transition: `opacity ${duration/1000}s ${effect}`
}">
</image>
<!-- 加载失败 -->
<image class="lazy-image" v-if="status==2" :src="errorSrc" mode="aspectFill" :style="{
opacity:isShow?'1':'0',
borderRadius,
width,
height,
transition: `opacity ${duration/1000}s ${effect}`
}">
</image>
</view>
</template>
<script>
let loadTimer = null
import loadingImage from "../static/images/avatar.png"
import loadFailImage from '../static/images/avatar.png'
/**
* 懒加载插件
* @description 懒加载插件
*
* @property {String} borderRadius 图片圆角,必须带尺寸单位
* @property {String} width 图片宽度,必须带尺寸单位(默认100%)
* @property {String} height 图片高度,必须带尺寸单位(默认100%)
* @property {String} src 图片链接,不传的话会一直是加载中状态
* @property {String|Number} minTimeOut 当图片加载过快(存在缓存)至少显示多少秒加载动画
* @property {String} effect = [linear|ease|ease-in|ease-out|ease-in-out] 过渡效果,可以用cubic-bezier
* @value linear 规定以相同速度开始至结束的过渡效果(默认)
* @value ease 规定慢速开始,然后变快,然后慢速结束的过渡效果
* @value ease-in 规定以慢速开始的过渡效果
* @value ease-out 规定以慢速结束的过渡效果
* @value ease-in-out 规定以慢速开始和结束的过渡效果
* @property {String|Number} duration 图片加载成功后的过渡时间,单位毫秒
* @property {Object} showDistance 当图片到屏幕哪个位置的时候开始加载,单位px,可以是负数 (默认{bottom:0})
* @property {String} loadSrc 加载中显示的图片，输入网络路径或绝对路径
* @property {String} errorSrc 加载失败显示的图片，输入网络路径或绝对路径
* @event {Function} show 当图片进入页面触发
* @event {Function} showSuccess 当图片完全加载完毕触发
* @example <lazy-lazyLoad :src="src" width="100rpx" height="100rpx"></lazy-lazyLoad>
*/
export default {
name: "lazyLoad",
props: {
//图片圆角 必须带尺寸单位
borderRadius: {
type: String,
default: '0'
},
//图片宽度
width: {
type: String,
...点击查看剩余70%
by thinkfuture
举个html的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Intersection Observer</title>
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/b...点击查看剩余70%
by thinkfuture
我知道答案，我要回答
私活外包
最新提问
如何用html写出网页滚动视频播放卡片视觉差异效果的代码？
程序员如何低成本搭建代理进行科学上网学习技术？
threejs如何做个三维搭积木的游戏？
three如何实现标记多个起始路过地点位置后选择旅行工具（飞机汽车高铁等），最后三维模拟行驶动画导出mp4？
ai实时驱动的3d数字人可视频聊天的开源技术有吗
swoole+phpfpm如何实现不同域名指向不同目录的多租户模式？
如何用go替换nginx实现请求phpfpm解析运行php脚本？
有没有浏览器离线运行进行各种文档、图片、视频格式转换的开源工具？
如何使用go语言搭建一个web防火墙？
linux如何检测特定网络协议比如http协议中报文是否包含特点关键词并阻止返回给客户？
