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
我知道答案，我要回答
私活外包
最新提问
ai能写出比黑客还厉害的零日漏洞等攻击工具攻击任意软件系统工程？
js如何获取浏览器的音频上下文指纹、Canvas指纹、WebGL渲染特征？
为啥ai开始抛弃markdown文本，重新偏好html文本了？
网站有没有办法鉴别访问请求是由ai操控chrome-devtools-mcp发出的？
有没有python自动操作浏览器让网站无法鉴别是机器行为？
为啥最新由Meta / 斯坦福 / 哈佛出的ProgramBench基准GPT-5.4、Claude Opus 4.7、Gemini 3.1 Pro 等全部 0% 通过率？
有没有免费的api查询域名是否完成icp工信部备案？
codex用HyperFrames与 Remotion自动做视频那个更好？
claude code中Skill MCP CLI SubAgent Hooks Plugin区别？
浏览器webrtc点对点通讯如何才能走系统代理？
