微信小程序仿抖音短视频切换效果的实例代码


Posted in Javascript onJune 24, 2020

一直以为抖音短视频切换假如用小程序做的话应该是比较简单的,直接用swiper实现就好,但在实际写的过程中才发现没那么简单,要控制的逻辑还是挺多的。

还是先看效果

微信小程序仿抖音短视频切换效果的实例代码

体验路径

自定义组件系列》》仿抖音短视频切换

微信小程序仿抖音短视频切换效果的实例代码

代码逻辑

直接调用自定义的swiper组件就好
调用代码
js

const videoList = []
Page({
 data: {
  videoList,
  activeId:2,
  isPlaying:true
 },
 onLoad() {
  var that = this
  wx.getSystemInfo({
   success: function(res) {
    that.setData({
     systemInfo:res,
     menuButtonBoundingClientRect: wx.getMenuButtonBoundingClientRect(),
    })
    console.log(res)
   },
  })
  this.setData({
   videoList: [{
    id: 1,
    title: "黄渤",
    desc: "中国女排发布会,黄渤与巩俐中国女排发布会,黄渤与巩俐",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851354869410.mp4?sign=1f636557effa496e074332e3f4b9b8aa&t=1589851461"
   }, {
    id: 2,
    title: "莱万多夫斯基",
    desc: "莱万多夫斯基逆天五子登科",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851322674828.mp4?sign=185e46cba885c4303c7cf5f8658bea9b&t=1589851482"
   }, {
    id: 3,
    title: "驾考那些事",
    desc: "半坡起步是多难",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851312271309.mp4?sign=978660c42305ec67d4c3d603c2ae5a3d&t=1589851496"
   }, {
    id: 4,
    title: "小美女",
    desc: "蹦蹦跳跳",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851307588534.mp4?sign=43cf344e83089348eeeea38d26ba51bb&t=1589851514"
   }, {
    id: 5,
    title: "黄渤",
    desc: "中国女排发布会,黄渤与巩俐中国女排发布会,黄渤与巩俐",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851354869410.mp4?sign=1f636557effa496e074332e3f4b9b8aa&t=1589851461"
   }, {
    id: 6,
    title: "莱万多夫斯基",
    desc: "莱万多夫斯基逆天五子登科",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851322674828.mp4?sign=185e46cba885c4303c7cf5f8658bea9b&t=1589851482"
   }, {
    id: 7,
    title: "驾考那些事",
    desc: "半坡起步是多难",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851312271309.mp4?sign=978660c42305ec67d4c3d603c2ae5a3d&t=1589851496"
   }, {
    id: 8,
    title: "小美女",
    desc: "蹦蹦跳跳",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851307588534.mp4?sign=43cf344e83089348eeeea38d26ba51bb&t=1589851514"
   }, {
    id: 9,
    title: "黄渤",
    desc: "中国女排发布会,黄渤与巩俐中国女排发布会,黄渤与巩俐",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851354869410.mp4?sign=1f636557effa496e074332e3f4b9b8aa&t=1589851461"
   }, {
    id: 10,
    title: "莱万多夫斯基",
    desc: "莱万多夫斯基逆天五子登科",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851322674828.mp4?sign=185e46cba885c4303c7cf5f8658bea9b&t=1589851482"
   }, {
    id: 11,
    title: "驾考那些事",
    desc: "半坡起步是多难",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851312271309.mp4?sign=978660c42305ec67d4c3d603c2ae5a3d&t=1589851496"
   }, {
    id: 12,
    title: "小美女",
    desc: "蹦蹦跳跳",
    url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851307588534.mp4?sign=43cf344e83089348eeeea38d26ba51bb&t=1589851514"
   }]
  })
 },
 onPlay(e) {
  // console.log("开始播放",e)
 },
 onShowPause(e){
  this.setData({
   isPlaying: false
  })
 },
 onHidePause(e){
  this.setData({
   isPlaying: true
  })
 },
 onPause(e) {
 },

 onEnded(e) {
  // console.log(e)
 },

 onError(e) {
 },

 onWaiting(e) {
 },

 onTimeUpdate(e) {
 },

 onProgress(e) {
 },
 onChange(e) {
  console.log(e)
  console.log("id",e.detail.activeId)
  this.setData({
   activeId:e.detail.activeId
  })
 },
 onLoadedMetaData(e) {
  console.log('LoadedMetaData', e)
 },
 go2Home() {
  wx.navigateBack({
   delta: 1,
  })
 },
})

wxml

<mp-video-swiper class="video-swiper" video-list="{{videoList}}" bindplay="onPlay" bindpause="onPause" bindtimeupdate="onTimeUpdate" bindended="onEnded" binderror="onError" bindwaiting="onWaiting" bindprogress="onProgress" bindloadedmetadata="onLoadedMetaData"
 bindchange="onChange" bindshowPause="onShowPause" bindhidePause="onHidePause"></mp-video-swiper>
 <image wx:if="{{!isPlaying}}" class="imagePlayer" style="left:{{systemInfo.screenWidth/2-40/2}}px;top:{{systemInfo.screenHeight/2-40/2}}px" src="./player.png">

 </image>
<view class="viewFloat">
 <view class="videoTitle">{{videoList[activeId-1].title}}</view>
 <view class="videoDes">{{videoList[activeId-1].desc}}</view>
</view>
<view class="viewTabContainer">
 <view class="viewTab">首页</view>
 <view class="viewTab">动态</view>
 <view class="viewTab">商品</view>
 <view class="viewTab">我的</view>
</view>

wxss

@import '../common.wxss';

page{
  background-color: black;
  height: 100%;
}

mp-video-swiper {
  width: 100%;
  height: 100%;
}
.imagePlayer{
 width: 40px;
 height: 40px;
 position: fixed;
 z-index: 1000;
 opacity: 0.6
}
.viewFloat{
 position: fixed;
 display: flex;
 z-index: 100;
 width: 500rpx;
 bottom: 60px;
 color: white;
 margin:20rpx; 
 flex-direction: column

}
.videoTitle{
 font-size: 18px;
 font-weight: 500;

}
.videoDes{
 font-size: 14px;
}
.viewTabContainer{
 position: fixed;
 display: flex;
 justify-content: space-around;
 align-items: center;
 flex-direction: row;
 width: 100%;
 height: 50px;
 border-top: 0.5px solid white;
 bottom: 0;
}
.viewTab{
 color: white;
}

总结

到此这篇关于微信小程序仿抖音短视频切换效果的实例代码的文章就介绍到这了,更多相关微信小程序抖音短视频切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 #Javascript
javascript实现前端成语点击验证优化
Jun 24 #Javascript
vue各种事件监听实例(小结)
Jun 24 #Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 #Javascript
javascript实现前端成语点击验证
Jun 24 #Javascript
vue单文件组件无法获取$refs的问题
Jun 24 #Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
十天学会php(2)
2006/10/09 PHP
MySQL修改密码方法总结
2008/03/25 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
php无序树实现方法
2015/07/28 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
详解php反序列化
2020/06/10 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
Javascript Object.extend
2010/05/18 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
原生js+ajax分页组件
2020/01/30 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python生成验证码图片代码分享
2016/01/28 Python
python书籍信息爬虫实例
2018/03/19 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python 图像平移和旋转的实例
2019/01/10 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
python 字典套字典或列表的示例
2019/12/16 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
学校地质灾害防治方案
2014/06/10 职场文书
个人党性锻炼总结
2015/03/05 职场文书
2015年度物流工作总结
2015/04/30 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电