uniapp小程序仿抖音切换内容

前言：

1，思路和方法参考站里一位大佬，但是链接找不到了。

2，使用swiper实现，只渲染3个swiper-item，每次切换时计算前后的item内容。

template：

swiper的高度设置为满屏显示的高度，我这里是去掉了顶部导航栏和底部tabbar的高度。

swiper主要是需要circular和current参数、change方法

swiper-item这里我是因为有视频和图片两种不同的内容，所以做了两个不同的组件，通过playId判断播放的哪一条内容。

<swiper :style="[{height:contentHeight+'px'}]" @change="swiperChange" style="width: 100%;":current="swiperCurrent" :duration="250" vertical circular @transition="transition"><swiper-item v-for="(item,index) in swiperList"><view :key="index"><video-view ref="videoView" v-if="item.type == 1" :playId="playId" :item="item"@clickComment="clickComment" :tabbarOffset="tabbarOffset" /><image-view ref="imageView" v-if="item.type == 0" :playId="playId" :item="item"@clickComment="clickComment" :tabbarOffset="tabbarOffset" /></view></swiper-item>
</swiper>

script:

<script>import Utils from './utils.js'let DataList = [] // 存储数据export default {data() {swiperCurrent: 0,playId: -1,swiperList: [],total:0,},computed: {contentHeight() { // 这里通过uView提供的工具api计算了swiper高度let sysInfo = uni.$u.sys()return sysInfo.windowHeight - sysInfo.statusBarHeight - sysInfo.safeAreaInsets.top},},onLoad(){this.init()},methods:{init(){// 初始化swiper数据let p = {...params, // 根据自己接口调整参数index:0, // 关键：给从0开始的一个index}Utils.requestData(p, res => {let {list,page,pageSize,total,totalPage} = resthis.total = totalDataList = []DataList = listthis.swiperList = []this.swiperList[0] = DataList[0] // 第一个this.swiperList[1] = DataList[1] // 第二个this.swiperList[2] = null        // 第三个，给nullthis.playId = 0this.swiperCurrent = 0})},swiperChange(e){// 切换时调用，计算前后itemlet current = e.detail.currentthis.swiperCurrent = currentlet currentItem = this.swiperList[current]if (currentItem == null) {this.swiperCurrent = 0 // 如果当前item为null，就弹回去this.playId = 0// 这里还可以根据需求，做下拉刷新的效果return}let lastIndex = this.getLastSwiperChangeIndex(current)let lastItem = this.getLastSwiperNeedItem(currentItem, DataList)this.swiperList[lastIndex] = lastItemlet nextIndex = this.getNextSwiperChangeIndex(current)let nextItem = this.getNextSwiperNeedItem(currentItem, DataList)if (nextItem != null) {this.swiperList[nextIndex] = nextItem}if (nextItem == null) {// 下一个item为空的话，尝试请求下一页数据，这里requestNextPage方法就不放出来了，需要注意就是下一页开始的index要接上这一页最后一个，我这里就是DataList.lengthlet nextpage = currentItem.page + 1this.requestNextPage(cb => {nextItem = this.getNextSwiperNeedItem(currentItem, DataList)this.swiperList[nextIndex] = nextItem})}this.playId = currentItem.index},/*** 获取swiperList中current上一个的index*/getLastSwiperChangeIndex(current) {return current > 0 ? current - 1 : 2},/*** 获取swiperLit中current下一个的index*/getNextSwiperChangeIndex(current) {return current < 2 ? current + 1 : 0},/*** 获取上一个要替换的list中的item*/getLastSwiperNeedItem(currentItem, list) {if (currentItem == null) return null;if (currentItem.index == 0) return nulllet listNeedIndex = currentItem.index - 1let realIndex = list.findIndex(function(item) {return item.index == listNeedIndex})if (realIndex == -1) return nulllet item = listNeedIndex == -1 ? null : list[realIndex]return item},/*** 获取下一个要替换的list中的item*/getNextSwiperNeedItem(currentItem, list) {if (currentItem == null) return null;let listNeedIndex = currentItem.index + 1let realIndex = list.findIndex(function(item) {return item.index == listNeedIndex})if (realIndex == -1) return nulllet total = this.total != 0 ? this.total : list.lengthlet item = listNeedIndex == total ? null : list[realIndex]return item},}}
</script>

utils.js

function requestData({start,index,pageSize},success,fail){let p = {// 接口参数}recommendList(p).then(res=>{console.log(res)res.list.forEach((e,i) =>{e.index = index + i // 这里是给每个内容加上index标识})success(res)})
}

思路总结：

DataList为所有内容的数据，请求接口时给每个内容加上从0开始的index，分页请求注意衔接。然后每次切换内容时通过index计算前后内容的值，保证页面只有3个swiper-item。另外注意在init就是初始化时，第三个swiper-item是null，这样在第一个下拉的时候就看到是空白，然后弹回，这里可以做一些下拉刷新的操作。至于circular是因为正常上滑到第三个item时，下一个item其实是在第一个的这样衔接就能产生无限连接的效果。

这里没有放出完整代码，一是公司保密要求，二是其实无关紧要，最关键的还是swiperChange和那几个计算前后item的方法，其它都是根据需求去拓展。

uniapp小程序仿抖音切换内容相关推荐

微信小程序仿抖音上下滑动整屏切换视频
微信小程序仿抖音上下滑动整屏切换视频使用官网上面的扩展组件官方使用的方式: 可结合自己业务修改: 使用官网上面的扩展组件 https://developers.weixin.qq.com/mini ...
微信小程序仿抖音视频
微信小程序仿抖音视频使用轮播图实现视频滑动效果. wxml 部分 <view class="video-contain">&l ...
微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果思路: 使用微信小程序的swiper组件,使其竖向滑动分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页问题: 加载多个视频时,多个视频会同时播放效果图 ...
微信小程序——仿抖音短视频切换效果
一直以为抖音短视频切换假如用小程序做的话应该是比较简单的,直接用swiper实现就好,但在实际写的过程中才发现没那么简单,要控制的逻辑还是挺多的. 还是先看效果体验路径自定义组件系列>> ...
微信小程序仿抖音项目实战说明
功能说明短视频管理后台: 1.bgm管理(增删改查.文件上传.点击播放) 2.用户列表 3.举报管理 4.用户视频管理因为微信端Api接口管理后台是围绕微信端功能做的,所以这里我就将功能列举到一起 ...
微信小程序仿抖音，微视上下滑动整屏切换视频带关注，收藏
废话不多说直接附代码 wxml  <view class="videoBox"><view class=" ...
小程序仿微视_微信小程序仿抖音，微视上下滑动整屏切换视频带关注，收藏
废话不多说直接附代码 wxml 收藏分享电话关闭 @{{item.reallyName}} {{item.workProvince}}{{item.workCity}}{{item.workCo ...
微信小程序仿抖音视频--整屏上下切换功能
效果演示: WXML: <view class="video_box"><view bindtouchend="touchEnd" id=&q ...
android仿抖音上下切换视频,微信小程序仿抖音视频之整屏上下切换功能的实现代码...
Page({ /** * 页面的初始数据 */ data: { video_list:[ {video_src:}, {video_src:}, {video_src:}, {video_src:}, ...

uniapp小程序仿抖音切换内容

uniapp小程序仿抖音切换内容相关推荐

最新文章

热门文章