直奔代码主题
wxml:

<view class="test_box">

<swiper indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" >

<swiper-item>

<view class='ceng'>

<image src="{{mdc_videofenmian}}" hidden="{{xiaoshi}}"/>

<view class='btn'><image src="/img/play.png" hidden="{{xiaoshi}}" bindtap="bindPlay" /></view>

<video src="{{mdc_video}}" objectFit="cover" bindtouchmove="mdc_move1" controls id="mdcVideo" style="width:100%;height:100% " hidden="{{mdc_show}}" >

<cover-view class='mdc_return' bindtap='returnquanping'>退出全屏</cover-view>

</video>

</view>

</swiper-item>

<block wx:for="{{imgUrls}}">

<swiper-item>

<image src="{{item}}"/>

</swiper-item>

</block>

</swiper>

</view>

wxss:

// pages/test/test.js

Page({

/**

* 页面的初始数据

*/

data: {

//swiper循环图片地址路径

imgUrls: [

'/img/01.jpg',

'/img/02.jpg',

'/img/03.jpg'

],

indicatorDots: false,

autoplay: false,

interval: 5000,

duration: 1000,

//视频路径

mdc_video:'https://cloud.video.taobao.com/play/u/576446681/p/1/e/6/t/1/50140370746.mp4',

//替换视频的封面图

mdc_videofenmian:'/img/f2.png',

// 视频的封面图显示消失的参数

xiaoshi:false,

// 视频显示消失的参数

mdc_show:true,

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

// 封面点击的时候相应的操作  获取视频在JS里的参数属性

//重点:点击图片接下来视频进行播放,但是视频播放后直接触发了视频的pause() 结局的方案是,延时150ms后再进行视频的播放,就完美解决了

bindPlay:function(e){

var that =this;

that.videoContext = wx.createVideoContext('mdcVideo');

// that.videoContext.play()

that.videoContext.pause();

setTimeout(function () {

that.videoContext.play()

}, 150);

that.setData({

xiaoshi:true,

mdc_show:false

})

},

//安卓系统能检测到 video touchemove 滑动的x距离,已此作为切换的swiper的凭证

//ios系统,检测不到video touchemove 滑动的x距离,通过cover-view 点击事件进行切换

mdc_move1: function (e) {

var that = this;

console.log(e)

console.log(e.touches[0].pageX)

that.videoContext = wx.createVideoContext('mdcVideo');

if (e.touches[0].clientX > 20) {

console.log(5555555555555555)

// that.videoContext.pause();

that.setData({

xiaoshi: false,

mdc_show: true,

})

}

},

returnquanping:function(e){

var that = this;

that.setData({

xiaoshi: false,

mdc_show: true,

})

}

})

以上代码亲测可用

 

小程序 swiper 轮播图滚动图片 + 视频的更多相关文章

  1. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  2. 自定义微信小程序swiper轮播图面板指示点的样式

    微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...

  3. 微信小程序的轮播图swiper问题

    微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...

  4. 微信小程序3D轮播图

    <!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...

  5. 【自定义轮播图】微信小程序自定义轮播图无缝滚动

    先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...

  6. 微信小程序 - 3d轮播图组件(基础)

    <!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...

  7. 微信小程序 swiper轮播 自定义indicator-dots样式

    index.wxml <view class="swiperContainer"> <swiper bindchange="swiperChange&q ...

  8. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  9. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

随机推荐

  1. Lazy的SDL教程 翻译----Lesson 22 Timing

    原文:http://lazyfoo.net/tutorials/SDL/22_timing/index.php Timing 计时 Last Updated 3/10/14 Another impor ...

  2. python2.7学习笔记——菜鸟教程

    标准数据类型 Numbers(数字) String(字符串) List(列表) Tuple(元组) Dictionary(字典) list = [ 'runoob', 786 , 2.23, 'joh ...

  3. 怎样使用 Vue 的监听属性 watch ?

    需求: 我需要在某个数据变化时能够执行特定的动作, 比如我在输入框中输入数字 88, 系统检测到以后就会弹窗 拜拜 , 而输入其他字符则不会触发, 这种需求简直多入牛毛, 实际上这就是 自定义事件 , ...

  4. maven 常见命令 学习笔记(一)之 -pl -am -amd

    假设现有项目结构如下 dailylog-parent|-dailylog-common|-dailylog-web 三个文件夹处在同级目录中 dailylog-web依赖dailylog-common ...

  5. java----FileInputStream类与FileReader类的区别(转)

    FileInputStream类与FileReader类的区别:两个类的构造函数的形式和参数都是相同的,参数为File对象或者表示路径的String,它们到底有何区别呢? Readers and W ...

  6. C#面向对象12 集合

    ArrayList和HashTable集合 1.ArrayList集合 ***添加元素 using System; using System.Collections.Generic; using Sy ...

  7. js点击发送验证码 xx秒后重新发送

    用于一些注册类的场景,点击发送验证码,xx秒后重新发送. 利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击. <! ...

  8. JVM垃圾回收那些事

    Java这种VM类跨平台语言比起C++这种传统编译型语言很大的区别之一在于引入了垃圾自动回收机制.自动垃圾回收大大提高了Java程序员的开发效率并且极大地减少了犯错的概率,但终归而言由于无法像C++程 ...

  9. maven入门--part2 安装

    Maven安装和配置 (1)下载安装文件apache-maven-3.03-bin.tar (2)解压至安装目录,安装完毕 (3)修改.bash_profile,修改maven安装路径,修改构建GC配 ...

  10. DataTable To List<T> DataTable Linq学习笔记

    LINQ 查询适用于实现的数据源 IEnumerable<T>接口或System.Query.IQueryable接口. DataTable类默认是没有实现以上接口的. 所以要在DataT ...