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，ai实时生成ui界面帮你干活？
标准拉丁字母a与俄文西里尔a看上去一样却不相等？
CodeGraph与RTK(Rust Token Killer)有啥区别？
python如何将svg图标转换成png图片？
windows如何设置让多个人同时远程桌面连接同一台电脑同时可操作不被踢出？
什么是WebRCD技术？
如何在centos的服务器docker上安装运行微信qq？
如何用ai图片模型祛除图片油腻感？
google的gemini-omni多模态大模型在哪可以免费体验？
google的Antigravity 、Antigravity CLI、Antigravity IDE、Antigravity SDK有啥区别不同？
