uni-app视频加图片轮播

uni-app视频加图片轮播，适用小程序、app、H5

下面是具体代码 代码片.

<template><view class="screen-swiper"><swiper class="screen-swiper" :hidden="!autoplay"><swiper-item><video id="myVideo" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4"autoplay="false" loop muted show-play-btn controls objectFit="cover" @pause="ZhanTing" @ended="ZhanTing"></video></swiper-item></swiper><swiper :hidden="autoplay" class="screen-swiper" indicator-dots="true" circular="true":autoplay="!autoplay" interval="3500" duration="500"><swiper-item @tap="BoFang"><image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg" mode="aspectFill"></image></swiper-item><swiper-item><image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg" mode="aspectFill"></image></swiper-item><swiper-item><image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg" mode="aspectFill"></image></swiper-item><swiper-item><image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg" mode="aspectFill"></image></swiper-item></swiper></view>
</template><script>var that;export default {data() {return {autoplay:false}},onLoad() {that = this;},onReady: function(res) {// #ifndef MP-ALIPAYthis.videoContext = uni.createVideoContext('myVideo')// #endif},methods: {BoFang(){if(that.autoplay==false){that.autoplay=true;that.videoContext.play();}},ZhanTing(){if(that.autoplay==true){that.autoplay=false}}}}
</script><style>.screen-swiper {min-height: 375upx;}.screen-swiper image,.screen-swiper video{width: 100%;display: block;height: 100%;margin: 0;pointer-events: none;}
</style>

我是用的nui-app编写的用的HBuilderX编写的，可以自己转小程序或者app、H5。

uni-app视频加图片轮播相关推荐

uniapp上下滑屏切换支持视频和图片轮播实现，类似抖音效果
实现方法: swiper中嵌套swiper,通过给swiper设置自定义属性,判断数据类型是图片还是视频,从而控制视频自动播放和图片轮播效果: videoPlayer代码: <template& ...
js特效之腾讯视频的图片轮播
今天搞了一天的javascript,准备做一个特效图片轮播,现在晚上十二点,中午十二点我开始搞的,到了现在还没有搞好还差一个鼠标移进移出的暂定和播放,其实这是一个很简单的特效,就是从刚开始的css的布 ...
纯净版安卓电子相册APP，安卓图片轮播
安卓电子相册功能功能描述应用效果工程架构下载地址功能描述最近想在电视上找个电子相册,找了半天,全是各种广告,我叫想要个纯净的电子相册,没办法自己做了一个存粹的电子相册APP,使用banne ...
无需编程，我教你打造H5页面图片轮播效果
图片轮播是手机App和手机网页上常见的功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.现在,H5页面和App上也可以加入图片轮播功能了,希望这个图片轮播效果能够给你 ...
Android App图片轮播效果的组件化
简介一个通用的图片轮播效果的通用组件,方便开发者快速集成. 初学者,其实应该实现一个自定义控件的,改天有空,在学习下吧,学习能力一般,以前也没写过java,这个组件都写了好久,惭愧啊. 背景笔者参 ...
html轮播鼠标悬停效果,jQuery图片轮播加悬停效果
插件描述:jQuery图片轮播加悬停效果 =======以下内容由会员只看不发了提供============ 使用方法 1.将文档内内部样式表保存到目录css下的style.css文件中,并在页面 ...
android banner加载布局,Android知识点之图片轮播控件Banner
Rate this post 在我们来发Android项目时,经常有图片或者广告的轮播功能的需求,下面将介绍一款Android开发时使用的开源图片轮播控件Banner,同时按序讲解如何使用配置这款控件 ...
抖音轮播图html代码,抖音上超火的“图片轮播”、“卡点”视频都是怎么做的？...
原标题:抖音上超火的"图片轮播"."卡点"视频都是怎么做的? 话不多说,直接进入正题. 首先,图片轮播类的视频该怎么做? 抖音视频剪辑江苏麒麟互娱步骤一:选 ...
Android 加载圆角的图片轮播图
图片轮播图相信大家有不会陌生,主要用于展示广告.本篇文章是基于第三方Banner框架实现图片轮播.大家可以去看看我之前的文章:Android 广告轮播图(最简单的实现),看看是怎么基础实现. 本篇文章 ...

uni-app视频加图片轮播

uni-app视频加图片轮播，适用小程序、app、H5

uni-app视频加图片轮播相关推荐

最新文章

热门文章