微信小程序视频列表滑动无限循环（仿抖音）_微信小程序页面能实现刷视频吗?类似看视频号一样,往上滑动,滑动之后再是打开完整-程序员宅基地

一、写在前面：

1:安卓ios表现基本一致，不是swiper组件实现，滑动效果流畅不卡顿，实现了列表无限循环。不是使用官方的腾讯视频播放组件，完整代码在下面

2:实现功能：支持位置导航、拨打电话、复制微信号、分享、联系客服、解析腾讯视频地址和拖动视频进度功能，暂未添加评论留言功能，后期会逐步增加

3:关于视频存储的问题，这里增加了腾讯视频方式，可以减少自身存储的相关费用及性能问题，这里要说明一下，并非使用腾讯视频播放组件，那个会有几秒的广告，体验太差，这里是直接拿的腾讯视频源播放地址的mp4地址，并且没有腾讯视频的logo，如下图（将视频上传至腾讯视频，然后存储播放页面地址进行解析就可以了）

先上效果图

二、开发背景说明

微信小程序中，同一个页面最多支持添加三个video组件，所以就通过数据处理的方式更新显示播放，有人说只写一个也行，如果只有一个那么上下滑动到一半位置的时候是看不到下一个视频内容的，衔接效果不好

三、代码（父级页面）

/*
* navbar是我自己封装的头部导航组件
avideo-swiper 为视频列表组件
*/
<navbar parameter='{ {parameter}}' showTitle="{ {showTitle}}" ></navbar>
<avideo-swiper
video-list="{ {videoList}}"
initial-index="{ {videoIndex}}"
bind:change="onChange"
duration="{ {duration}}"
bind:play="onPlay"
bind:wait="onWait"
></avideo-swiper>

他们官方让多写一些内容，要不然就提示内容不佳，我就把代码拿出来了

const app = getApp();

Page({
data: {
showTitle:true,
parameter: {
'navbar': '1',
'return': '1',
'title': '乡村线报',
'color': true,
'class': 'trans',
},
url: app.globalData.url,
videoList: [],
pageNum: 1,
pageSize: 5,
videoIndex: 0, //初始播放第几个
duration: 500, //滑动切换时常
dataIdxNow:0, //当前播放第几个,获取分享内容用的
},
onLoad(options) {
if(options.id){
this.setData({
shareId:options.id
})
// 获取视频详情
this.getVideoDetail()

} else {
// 获取视频列表
this.getVideoList()
}
},
// 获取视频列表
getVideoList() {
let that = this,
{
pageSize,
pageNum
} = that.data
wx.request({
url: that.data.url + 'xxxxxxx&page=' + pageNum + '&limit=' + pageSize,
header: {
'content-type': 'application/json'
},
success(res){
if (res.data.code == 0) {
let list = res.data.data.list;
list.push({})

let LoadEnd = res.data.data.page_count <= pageNum ? true : false

that.setData({
LoadEnd,
videoList:[...that.data.videoList, ...list]
})
}
}
})
},
// 获取视频详情
getVideoDetail() {

let that = this,shareId = that.data.shareId
wx.request({
url: that.data.url + 'xxxxxx&i

本文链接：https://blog.csdn.net/fanhu6816/article/details/128081444

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios