微信小程序swiper组件实现抖音翻页切换视频功能的实例代码_swiper组件可以实现哪些功能 - CSDN文库

149 浏览量更新于2023-03-16 评论 1 收藏 120KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

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

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

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

效果图:

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="../../icon/返回.png" />

</navigator>

</cover-view>

<swiper vertical duration="200" bindchange="slide" style="height:{{screenHeight}}px; width:100%;background:#000">

<block wx:for="{{video}}" wx:key="id">

<swiper-item style="height:100%; width:100%">

<video wx:if="{{index==changeIndex}}" style="height:100%; width:100%" src="{{item.video}}" autoplay="true" />

</swiper-item>

</block>

</swiper>

wxss:

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38624315

粉丝: 7
资源: 921

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈