相思资源网 Design By www.200059.com

微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo

利用swiper组件可简单快速编写仿抖音短视频的功能  自动播放当前页视频  翻页停止播放当前页视频 并自动播放下页视频

有其他需求也可用 cover-view 添加 收藏 点赞 评论等功能

效果图:

微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

video官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/video.html

swiper官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

注: 官方一篇文档介绍,  基础库 2.4.4 以下版本,  video (原生) 组件不支持在 swiper 中使用

介绍: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

臭豆腐 腐乳 加柠檬 上代码就完了 奥利给 ! ! !  (里面有自定义导航栏的代码 但不多 参考着康康... 吼吼吼...)

wxml:

<!-- 自定义头部导航栏 -->
<cover-view style="height:{{statusBarHeight+navBarHeight}}px">
 <navigator open-type="navigateBack">
  <cover-image src="/UploadFiles/2021-04-02/返回.png">

wxss:

cover-view {
 width: 100%;
 position: fixed;
 z-index: 999;
}
 
cover-image {
 width: 17px;
 height: 17px;
 margin-left: 8px;
 padding-right: 20px;
 position: absolute;
 bottom: 11px;
}

json:

{
 "navigationBarTextStyle": "white",
 "navigationStyle": "custom",
 "usingComponents": {}
}

js:

//获取应用实例
const app = getApp()
 
Page({
 /**
  * 页面的初始数据
  */
 data: {
  screenHeight: app.screenHeight,//获取屏幕高度
  statusBarHeight: app.statusBarHeight,//获取状态栏高度
  navBarHeight: app.navBarHeight,//获取导航栏高度
  changeIndex: 0,
  video: [{
   id: 0,
   video: "/*视频地址*/"
  }, {
   id: 1,
   video: "/*视频地址*/"
  }, {
   id: 2,
   video: "/*视频地址*/"
  }]
 },
 //划动切换
 slide(e) {
  this.setData({
   changeIndex: e.detail.current 
  })
  console.log(e.detail.current)
 }
})

app.js

App({
 onLaunch: function() {
  // 获取系统信息 
  wx.getSystemInfo({
   success: (res) => {
    // 获取屏幕高度
    this.screenHeight = res.screenHeight
    // 获取状态栏高度
    this.statusBarHeight = res.statusBarHeight
    // 通过操作系统 确定自定义导航栏高度 
    if (res.system.substring(0, 3) == "iOS") {
     this.navBarHeight = 42
    } else {
     this.navBarHeight = 44
    }
   }
  })
 }
})

总结

标签:
微信小程序实现抖音翻页切换视频,微信小程序实现抖音翻页切换

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“微信小程序swiper组件实现抖音翻页切换视频功能的实例代码”

暂无微信小程序swiper组件实现抖音翻页切换视频功能的实例代码的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。