基于vue3.0+vant3仿制抖音首页

Vedu • 2021-01-26 07:01 • 资源分享 • 阅读 1434

今天给大家分享一些vue3.x实现抖音首页上下左右滑动切换效果。

简易版演示

vite.js 新一代web开发构建工具。有望替代webpack，哈哈哈~~~

目前最新推出的vite.js已经到了2.0版本。而且每天还在不停更新迭代。

https://vitejs.dev/
https://github.com/vitejs/vite

顶部采用自定义navbar组件实现。

<navbar :back="false" bgcolor="transparent" transparent>
	<template v-slot:title>
		<div class="navbar__tab">
			<div class="navbar__tab-live flexbox flex-alignc"><i class="iconfont icon-zhibo1">i>div>
			<span v-for="(item, index) in videoLs" :key="index" class="item" :class="activeNav == index ? \'on\' : \'\'" @click="handleTabNav(index)">{{item.label}} <em v-if="item.badge" class="vui__badge">{{item.badge}}em> <em v-if="item.dot" class="vui__badge-dot">em>span>
		div>
	template>
	<template v-slot:right><div><i class="iconfont icon-search">i>div>template>
navbar>

底部是使用自定义tabbar组件。

"rgba(255,255,255,.6)" activeColor="#fff" fixed />

由于之前有过一篇分享，这里就不详细介绍。

尝鲜 Vue3.0 Vite 自定义导航栏弹窗组件

滑动切换则是使用有赞vue3组件库vant3.x中的swipe轮播组件实现。

开启lazy-render能大幅提升性能，一开始加载两页，滚动下一页，再加载另外两页，让滑动切换更加流畅。

<van-swipe ref="swipeHorizontalRef" :show-indicators="false" :loop="false" @change="handleSwipeHorizontal">
	<van-swipe-item>附近内容列表...van-swipe-item>
	<van-swipe-item>
		<van-swipe vertical lazy-render :loop="false">
			<van-swipe-item>关注内容1van-swipe-item>
			<van-swipe-item>关注内容2van-swipe-item>
			<van-swipe-item>关注内容3van-swipe-item>
		van-swipe>
	van-swipe-item>
	<van-swipe-item>
		<van-swipe vertical lazy-render :loop="false">
			<van-swipe-item>推荐内容1van-swipe-item>
			<van-swipe-item>推荐内容2van-swipe-item>
			<van-swipe-item>推荐内容3van-swipe-item>
		van-swipe>
	van-swipe-item>
van-swipe>

ok，今天就分享到这里。希望对大家有所帮助哈！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/20592.html

基于vue3.0+vant3仿制抖音首页

相关推荐

发表评论