uniapp小程序仿抖音切换内容

最新推荐文章于 2024-05-27 08:42:28 发布

马蹄爽，

最新推荐文章于 2024-05-27 08:42:28 发布

阅读量741

点赞数 4

文章标签：小程序 uni-app

本文链接：https://blog.csdn.net/a834964787/article/details/123850221

版权

前言：

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" :tabba