Chinaunix首页 | 论坛 | 博客
  • 博客访问: 275440
  • 博文数量: 191
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1824
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(191)

文章存档

2018年(27)

2017年(5)

2016年(53)

2015年(89)

2014年(17)

分类: 其他平台

2018-07-04 17:57:36

直奔代码主题
wxml:

点击(此处)折叠或打开

  1. <view class="test_box">

  2.   <swiper indicator-dots="{{indicatorDots}}"
  3.   autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" >
  4.   <swiper-item>
  5.   <view class='ceng'>
  6.       <image src="{{mdc_videofenmian}}" hidden="{{xiaoshi}}"/>
  7.       <view class='btn'><image src="/img/play.png" hidden="{{xiaoshi}}" bindtap="bindPlay" /></view>
  8.       <video src="{{mdc_video}}" objectFit="cover" bindtouchmove="mdc_move1" controls id="mdcVideo" style="width:100%;height:100% " hidden="{{mdc_show}}" >
  9.         <cover-view class='mdc_return' bindtap='returnquanping'>退出全屏</cover-view>
  10.       </video>
  11.   </view>
  12.     </swiper-item>
  13.   <block wx:for="{{imgUrls}}">
  14.     
  15.     <swiper-item>
  16.       <image src="{{item}}"/>
  17.     </swiper-item>
  18.   </block>
  19. </swiper>

  20. </view>
wxss:

点击(此处)折叠或打开

  1. // pages/test/test.js
  2. Page({

  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7. //swiper循环图片地址路径
  8.     imgUrls: [
  9.      '/img/01.jpg',
  10.       '/img/02.jpg',
  11.       '/img/03.jpg'
  12.    
  13.     ],
  14.     indicatorDots: false,
  15.     autoplay: false,
  16.     interval: 5000,
  17.     duration: 1000,
  18.     //视频路径
  19.     mdc_video:'https://cloud.video.taobao.com/play/u/576446681/p/1/e/6/t/1/50140370746.mp4',
  20.     //替换视频的封面图
  21.      mdc_videofenmian:'/img/f2.png',
  22.     // 视频的封面图显示消失的参数
  23.     xiaoshi:false,
  24.     // 视频显示消失的参数
  25.     mdc_show:true,
  26.   },

  27.   /**
  28.    * 生命周期函数--监听页面加载
  29.    */
  30.   onLoad: function (options) {
  31.   
  32.   },

  33.   /**
  34.    * 生命周期函数--监听页面初次渲染完成
  35.    */
  36.   onReady: function (res) {
  37.     
  38.   },

  39.   /**
  40.    * 生命周期函数--监听页面显示
  41.    */
  42.   onShow: function () {
  43.   
  44.   },

  45.   /**
  46.    * 生命周期函数--监听页面隐藏
  47.    */
  48.   onHide: function () {
  49.   
  50.   },

  51.   /**
  52.    * 生命周期函数--监听页面卸载
  53.    */
  54.   onUnload: function () {
  55.   
  56.   },

  57.   /**
  58.    * 页面相关事件处理函数--监听用户下拉动作
  59.    */
  60.   onPullDownRefresh: function () {
  61.   
  62.   },

  63.   /**
  64.    * 页面上拉触底事件的处理函数
  65.    */
  66.   onReachBottom: function () {
  67.   
  68.   },

  69.   /**
  70.    * 用户点击右上角分享
  71.    */
  72.   onShareAppMessage: function () {
  73.   
  74.   },
  75.   // 封面点击的时候相应的操作  获取视频在JS里的参数属性 
  76.   //重点:点击图片接下来视频进行播放,但是视频播放后直接触发了视频的pause() 结局的方案是,延时150ms后再进行视频的播放,就完美解决了
  77.   bindPlay:function(e){
  78.     var that =this;
  79.    that.videoContext = wx.createVideoContext('mdcVideo');
  80.   // that.videoContext.play()
  81.    that.videoContext.pause();
  82.    setTimeout(function () {

  83.      that.videoContext.play()
  84.    }, 150);
  85.     that.setData({
  86.       xiaoshi:true,
  87.       mdc_show:false
  88.     })
  89.      
  90.   },
  91. //安卓系统能检测到 video touchemove 滑动的x距离,已此作为切换的swiper的凭证
  92. //ios系统,检测不到video touchemove 滑动的x距离,通过cover-view 点击事件进行切换
  93.   mdc_move1: function (e) {
  94.     var that = this;
  95.     console.log(e)
  96.     console.log(e.touches[0].pageX)
  97.     that.videoContext = wx.createVideoContext('mdcVideo');
  98.     if (e.touches[0].clientX > 20) {
  99.       console.log(5555555555555555)
  100.       // that.videoContext.pause();
  101.       that.setData({
  102.       xiaoshi: false,
  103.       mdc_show: true,
  104.      })
  105.     }
  106.   },
  107.   returnquanping:function(e){
  108.     var that = this;
  109.     that.setData({
  110.       xiaoshi: false,
  111.       mdc_show: true,
  112.     })
  113.   }
  114. })

有图有真相,欢迎订阅

阅读(861) | 评论(4) | 转发(0) |
给主人留下些什么吧!~~

拾忆17652075852018-11-05 19:48:33

zhaoaaaaa5:你好 wxss部分的代码你能发一下吗?

.test_box{
  width: 100%;
  height: 500rpx;
}
.test_box swiper{
  width: 100%;
  height: 100%;
  z-index: 9999999999999999999;
}
.test_box swiper-item{
  width: 100%;
  height: 100%;
}
.test_box swiper-item image{
  width: 100%;
  height: 100%;
}
.diyizhen{
  width: 100%;
  height: 100%;
  padding:5%;回复 | 举报

拾忆17652075852018-11-05 19:48:20

gina_ydd:可否留下完整的代码,包括样式发一下呗,谢谢

.test_box{
  width: 100%;
  height: 500rpx;
}
.test_box swiper{
  width: 100%;
  height: 100%;
  z-index: 9999999999999999999;
}
.test_box swiper-item{
  width: 100%;
  height: 100%;
}
.test_box swiper-item image{
  width: 100%;
  height: 100%;
}
.diyizhen{
  width: 100%;
  height: 100%;
  padding:5%;回复 | 举报

gina_ydd2018-10-29 16:28:05

可否留下完整的代码,包括样式发一下呗,谢谢

zhaoaaaaa52018-10-19 15:37:49

你好 wxss部分的代码你能发一下吗?

评论热议
请登录后评论。

登录 注册