微信小程序原生实现抖音的视频翻页效果

最新推荐文章于 2025-03-16 12:08:56 发布
最新推荐文章于 2025-03-16 12:08:56 发布
阅读量4.3k 收藏 8
点赞数 3
分类专栏： 微信小程序 文章标签： 微信小程序 抖音 scroll-view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011034683/article/details/100894843
版权

 效果如下图 :

 

具体实现, 用scroll-view video cover-view, 滑动结束后只展示当前视频品和当前前后的两个视频,

代码就不贴了, 因为代码一大堆, 包含了一些点赞、评论、转发等很多功能代码, 如果去掉不相干代码再贴上了, 又怕跑不通,反而遭骂,

所以, 如果有需要的同学, 可以留言.

 

2019-12-27 提示下, 小程序要播放视频, 是要申请传媒许可证的

2020-01-15  现在swiper 也可以做, 大家可以用swiper试一下, 不用手写js滚动算法了

2020-03-27  如果需要,请自行下载 , 不发了, 发累了

https://download.youkuaiyun.com/download/u011034683/12272495

微信小程序swiper组件实现抖音翻页切换视频功能
TP19981017的博客
06-22 4070
效果图: video官方介绍:https://developers.weixin.qq.com/miniprogram/dev/component/video.html swiper官方介绍:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 上代码就完了,奥利给 ! ! ! (里面包含了自定义导航栏的东西 不过不多 参考着康康 吼吼吼...) wxml: <!-- 自定义头部导航...
微信小程序 实现防抖音上下滑动切换直播间
挚友阳光的博客
03-08 1314
微信小程序 实现防抖音上下滑动切换直播间
微信小程序实现抖音视频效果
最新发布
2501_91048859的博客
03-16 539
当我们进行开发的时候可能会遇到需要实现<em>抖音</em>视频效果的需求，并且网上该效果的开源代码少，找到的开源代码代码量大，很难进行二次开发。对此我将自己的代码进行简化，仅留下可动性高的代码模块。以上是实现效果与...
微信小程序实现翻书效果
weixin_39815923的博客
04-10 5615
最近要在微信小程序里实现一个类似翻页的场景，网上翻看了多个案例无非就两种实现，第一种通过css 3d变换+动画实现，第二使用现成库。前者实现效果一般，后者js库是基于古老的JQuery来实现的并没办法移植到小程序了里。下面就自己调研了一下turnjs来实现小程序的turnjs效果截图。
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
10-15
在微信小程序中，实现类似抖音翻页切换视频的功能，我们可以借助`swiper`组件。`swiper`组件主要用于创建轮播图，它可以实现上下或左右滑动的效果，非常适合用来模仿抖音视频的翻页切换。本实例将详细讲解如何使用`...
微信小程序 抖音效果
zk_csdn917的博客
11-17 1902
微信小程序 抖音效果 方法一：swiper-item 里放video 看见有人说这样不能放，有人说现在可以放了，我放了之后可以滑动，效果还行 wxml: <swiper vertical="true" style="height:100vh;" bindchange="change" wx:if="{{video.length>0}}"> <block wx:for="{{video}}" wx:key="unique"> <swiper-item>
微信小程序 仿写小视频滑屏翻页播放下一个视频效果、自定义导航栏
夜阑珊妖妖
12-09 1040
视频列表，点击进入视频播放页，仿写小视频滑屏翻页播放下一个视频效果、自定义导航栏 自定义导航详细介绍看这里：https://blog.youkuaiyun.com/ws19900201/article/details/103437964   视频列表: html: <!--pages/video/video.wxml--> <view class="video"> ...
微信小程序，H5翻书动画效果
11-10
微信小程序，H5翻书动画效果，可调整翻书的速度，使用博文说明：https://a-jing.blog.youkuaiyun.com/article/details/109598527
微信小程序仿1抖音
11-14
微信小程序仿抖音源码，希望对大家有帮助哈0.0.0.0.0.0.0 (不要下载，代码出了问题，现在跑不起来了。删不掉资源)
微信小程序实现抖音播放效果的实例代码
10-15
主要介绍了微信小程序实现抖音播放效果的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序播放详情页，附带：点赞.双击点赞.单击控制视频播放.上下滑动切换视频等功能
qq_41241504的博客
01-04 5157
   &lt;!-- 视频资源 --&gt; &lt;video id="myVideo" src="{{vsrc[vid]}}" danmu-list="{{danmuList}}" autoplay='true' show-fullscreen-btn='false' show-center-play-btn='false' objectFit='fill' style='height:...
小程序如何实现抖音视频效果？
CjBkl的博客
07-11 1373
1、wxml部分代码 ，主要是利用swiper 标签滑动切换，事件处理，具体参数说明可以去小程序官网文档看。https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html <swiper vertical="{{true}}" current="{{current}}" circular="{{false}}" bindchange="bindchange" easi
html5微信滑动翻页效果,微信小程序中实现左右滑动图片翻页
weixin_42515045的博客
06-08 1079
页面代码class="container"indicator-dots="{{indicatordots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"bindchange='onSlideChange'>js代码data: {hidden: false,imgList: [],autoplay:...
微信小程序书籍翻页效果
weixin_42773941的博客
04-02 7656
微信小程序实现书籍翻页功能 实现原理 通过覆盖页面来实现翻页效果可以将覆盖的页面分成3个过程第一层是上一页，第二层是当前页面，第三层是下一页，其他页面全部隐藏，一般向上翻页用到的是第一层和第二层，向下翻页用到的是第二层和第三层。 效果展示（不会做动图凑合看吧） 大致就是这样的一个效果（做的是手指滑动的） <view wx:if="{{cl1==0||cl1==1}}" class="w...
评论 76
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值