小程序如何实现抖音视频效果?

1、wxml部分代码 ,主要是利用swiper 标签滑动切换,事件处理,具体参数说明可以去小程序官网文档看。https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

    <swiper vertical="{{true}}"current="{{current}}" circular="{{false}}" bindchange="bindchange"easing-function="default"><block wx:for="{{videoList}}" wx:key="*this" wx:for-index="i"><swiper-item><view class="swiper-item"><videobindtap="clickVideo"object-fit="cover"id="video_{{i}}"show-fullscreen-btn="{{false}}"autoplay="{{i==0 && firstRequest}}"wx:if="{{i>current-2 && current+2>i}}"loop="{{true}}" src="{{item.video_url}}" class="video-dom"></video><!-- i>current-2 && current+2>i 这个判断的作用是,加载当前视频和前面一个和后面一个视频资源,  不多加载,做到按需加载,节流-->
<!-- autoplay="{{i==0 && firstRequest}}"  首次打开的时候,第一个视频自动播放,其它的滑动的时候触发播放 --></view></swiper-item></block></swiper>

2、js 部分


Page({/*** 页面的初始数据*/data: {isPlay:true,video_id:"video_0",videoList:[],pageShow:false,current:0, // 当前滑块vertical:false,  // 滑块方向offset:0,page_index:1,firstRequest:true,isRequest:true,  // 是否正在发起请求,控制不会多次滑动出发接口请求多次问题page_count:5,isHaveData:true // 判断接口返回的还有没有数据,没有设置成false},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getShortVideo();},// current 改变时会触发 change 事件bindchange(e){this.setData({current: e.detail.current})this.swiperVideo(e);if(this.data.isHaveData && e.detail.current >= this.data.videoList.length-2 && !this.data.isRequest){this.setData({page_index: this.data.page_index+1},res=>{this.setData({offset: (this.data.page_index-1) * this.data.page_count,isRequest: true,})this.getShortVideo();})}},// 点击视频暂停活播放clickVideo(e){//这里的vid是视频的id,因为这里我是用接口传数据的,里面有视频idlet vid = e.currentTarget.id;let indexVideoContext = wx.createVideoContext(vid)if(this.data.isPlay){indexVideoContext.pause();}else{indexVideoContext.play();}this.setData({isPlay: !this.data.isPlay})},// 获取视频列表getShortVideo(){wx.cloud.callFunction({name:"short-video",data:{type:"checkList",offset: this.data.offset,page_count: this.data.page_count}}).then(res=>{console.log(res)if(this.data.page_index==1){this.setData({indexVideo:res.result.list[0]})}// 请求接口的数据和每次获取条数如果不相等,说明后面已经没有数据了 isHaveData: falseif(res.result.list.length!=this.data.page_count){this.setData({isHaveData:false})}this.setData({isRequest: false,videoList: [ ...this.data.videoList, ...res.result.list],})})},// 滑动切换视频swiperVideo(e){//这里的vid是视频的id,因为这里我是用接口传数据的,里面有视频idlet vid = `video_${e.detail.current}`;// 上个一视频idvar prev_id = this.data.video_id;// 停止山一个视频播放wx.createVideoContext(prev_id).pause();this.setData({firstRequest:false,video_id:vid,isPlay:true})// 延迟500ms,再播放本视频setTimeout(function(){wx.createVideoContext(vid).play();},500)},})

以上是主要代码部分,如有不明白的留言,相互探讨交流

(完结)

下面是我的小程序实现的效果,可以扫码看看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/61638.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何开发自动生产爆款抖音视频机器人

这是我这利用技术 自动生成的抖音视频,每个视频都是原创,而且可以基于主题生成对应的视频封面,例如需要制作大海主题的视频,只需要输入 “大海”,就可以生成视频封面为大海且背景音乐为海相关的主题视频。 抖音短视频分解 其实自动化制作视频并不难,我们可以通过一个短视…

微信小程序实现抖音视频效果

当我们进行开发的时候可能会遇到需要实现抖音视频效果的需求&#xff0c;并且网上该效果的开源代码少&#xff0c;找到的开源代码代码量大&#xff0c;很难进行二次开发 对此我将自己的代码进行简化&#xff0c;仅留下可动性高的代码模块 以上是实现效果与此处demo的模板 <…

抖音短视频脚本制作的一些技巧,快快收藏起来!

在抖音上发布一个成功的短视频需要多方面的考虑&#xff0c;其中最重要的是脚本的制作。一个好的脚本不仅可以吸引用户观看&#xff0c;还可以让用户产生共鸣&#xff0c;从而提高视频的传播效果。以下是不若与众科技一些关于抖音短视频脚本制作的技巧。 1. 简短明了 抖音短视…

抖音视频链接数据分析

一、制作背景 目前抖音账号数据只能进入后台查看 对于个人自媒体和工作室管理的账号 数量众多不利于提升效率。特别是工作室 一人管理数个账号每天发布几十条视频 隔天观看后台数据就要数个小时 每天剪辑视频发布视频观看后台 数据一天就过去了&#xff0c;每天还忙的焦头烂额 …

python爬虫+pyqt5制作完成 <在线翻译软件.exe>

#仅供学习参考。 目标网站&#xff1a;网易翻译pyqt5 在线翻译.exe 功能需求&#xff1a;中英互译&#xff0c;其他国家语言也行&#xff0c;如果能用键盘打得出来得话&#xff0c;这部分功能没怎么测试。 界面介绍&#xff1a;因为有时候网络有延迟&#xff0c;所有增加了个…

新媒体人都在用的6款在线设计工具

无论是在工作中还是学习中&#xff0c;经常会需要用到各种工具。学会运用工具&#xff0c;可以让你事半功倍&#xff0c;轻松高效地完成任务&#xff01;今天给大家整理几款高效的在线设计工具&#xff0c;一起来看看吧&#xff01; 01.稿定设计——贴图加水印 网址&#xff…

mac设计师系列 Adobe “全家桶” 15款设计软件 值得收藏!

文章素材来源&#xff1a;风云社区、简书 文章收录于&#xff1a;风云社区 www.scoee.com&#xff0c;提供1700多款mac软件下载 Adobe Creative Cloud 全线产品均可开放下载&#xff08;简称Adobe CC 全家桶&#xff09;&#xff0c;Adobe Creative Cloud 为多国语言版本&#…

Principle for Mac 6.12 中文版 优秀的交互原型设计工具

Principle for Mac 是一款优秀的交互原型设计工具&#xff0c;可以在很短时间内制作出一个具有完整交互动画的原型&#xff0c;并且可将交互动画生成视频或者 Gif 分享到 Dribbble、Twitter 等社交平台。此外 Principle 还支持多种尺寸的原型设计&#xff0c;包括 Apple Watch&…

spacedesk-把ipad变成显示器-真香经验全面分享

目录 spacedesk基本使用 spacedesk自定义设置 退出和重新开启电脑端的spacedesk软件 作为学生党&#xff0c;去图书馆学习不能背着个显示器&#xff0c;工作人士出去出差可能也需要显示器&#xff0c;如果你有平板的话&#xff0c;何不物尽其用呢。其实无论是ipad&#xff0…

交互原型图设计必备软件,这5款太赞了

如果你是UI/UX设计师&#xff0c;你肯定会在工作中涉及到交互原型图的设计。 在设计交互原型图时&#xff0c;我们通常需要找到一些适合自己的交互原型图设计软件来制作高质量的交互原型图。 与您分享5款易于使用的交互原型图设计软件 1.即时设计 即时设计是国内UI/UX设计师…

一个产品级MCU菜单框架设计~

声明&#xff1a;本处所说的菜单是用在128*64这种小屏幕的菜单&#xff0c;例如下面这种&#xff0c;不是彩屏上的GUI。 作为一个底层驱动工程师&#xff0c;驱动写完了&#xff0c;是要写硬件测试程序的。这个测试程序&#xff0c;一般给测试部/硬件工程师用来测试硬件&#x…

16款精品Mac平面设计软件,设计师专用,打造设计大作

如果您对自己的设计没有信心&#xff0c;那么您试试这16款精品Mac平面设计软件吧&#xff0c;设计师专用&#xff0c;打造设计大作的良心推荐&#xff0c;无论是新手还是专业的设计师来说&#xff0c;都能快速作创造出满意的作品。 1、Autodesk Sketch Book Autodesk SketchBo…

设计行业不可不知的6个电脑端设计神器

工欲善其事必先利其器&#xff0c;作为战斗在用户体验第一线的 UI 设计师更是如此&#xff0c;对自己的工具一定相当挑剔。毕竟&#xff0c;好用的工具才能够发挥自己100%的实力。下面介绍的这6款设计软件&#xff0c;作为设计师的你如果还未了解&#xff0c;那么绝对不容错过。…

pc ios android,PC、iOS、Android通用的交互设计

本文作者一大坨黄 供职微博UDC设计中心 。近年来&#xff0c;在技术方式&#xff0c;网页自适应的兴起、微软Win8系统的发布&#xff0c;都在试图解决一个问题&#xff1a;让同一产品能在平板、PC等多平台下同时使用。 由此可见&#xff0c;替换掉冗余的多版本开发模式&#xf…

Mac设计的必备设计软件,看看你还差什么

作为设计师而言,人手一台苹果设备大概是人人向往的最佳配置。即使是刚入行业的小白,揣着苹果设备也能让自己看起来像那么一回事儿。不过,真正在设计工作中发挥作用的还是那些优秀的设计软件。让我们来了解一下下面的这些MacOS必备设计软件,看看你还差什么。 1.Figma …

推荐:产品经理都在用的交互软件

这篇文章主要针对还没有入职产品经理&#xff0c;但是对产品经理有兴趣&#xff0c;想要进行了解&#xff0c;以及已经入职&#xff0c;但是没有头绪的一些小伙伴们&#xff0c;为大家分享能够轻松上手的交互软件。 1.Pixso 第一款软件是我在进行交互设计的时候最喜欢使用的设…

MAC 终端美化教程(来个全套)

废话不多&#xff0c;上才艺&#xff08;最终效果图&#xff09; 帅不帅&#xff01;&#xff01;&#xff01; 你说帅 按照此教程咔咔一顿操作后&#xff0c;你将获得以下装逼成就&#xff1a; 1、清晰好看的文字提示格式 2、带有自己最靓照骗的背景图 3、这个很重要&#xf…

html中pc端与移动端区别,盘点移动端和PC端交互设计上的区别

由于屏幕的大小&#xff0c;所以PC端和移动端在信息呈现上有很大不同。但是有的设计师简单地将区别理解为把页面做长一点&#xff0c;让用户多滑动一些。然而这样是不对的&#xff0c;并不能根本理解两者的不同。 终于把书写完&#xff0c;接下来恢复之前的更文频率。这篇文章我…

你一定要知道的5款交互原型设计工具

不管是小白还是大牛&#xff0c;绘制交互原型图是产品经理必备的技能&#xff1b;不管是实习生还是总监&#xff0c;都是从画原型图开始的。好的交互原型图&#xff0c;可以让开发不问一句&#xff0c;就能看得清清楚楚&#xff0c;开发得明明白白&#xff1b;差的交互原型图&a…

一文带你快速设计精美可视化大屏

一文带你快速设计精美可视化大屏 文章目录 一文带你快速设计精美可视化大屏&#x1f468;‍&#x1f3eb;前言&#xff1a;什么是可视化大屏&#x1f468;‍&#x1f52c;内容1&#xff1a;可视化大屏设计原则和设计考虑&#x1f468;‍⚖️内容2&#xff1a;可视化大屏设计流程…