今天给大家分享一些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组件库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