今天给大家分享一些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组件。
<tabbar color="rgba(255,255,255,.6)" activeColor="#fff" fixed />
由于之前有过一篇分享,这里就不详细介绍。
滑动切换则是使用有赞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>关注内容1</van-swipe-item>
<van-swipe-item>关注内容2</van-swipe-item>
<van-swipe-item>关注内容3</van-swipe-item>
</van-swipe>
</van-swipe-item>
<van-swipe-item>
<van-swipe vertical lazy-render :loop="false">
<van-swipe-item>推荐内容1</van-swipe-item>
<van-swipe-item>推荐内容2</van-swipe-item>
<van-swipe-item>推荐内容3</van-swipe-item>
</van-swipe>
</van-swipe-item>
</van-swipe>
ok,今天就分享到这里。希望对大家有所帮助哈!