短视频商城源码,移动端左右滑动切换页面效果
短视频商城源码,移动端左右滑动切换页面效果实现
功能分析:
点击顶部菜单可以跳转到对应的页面。
按压屏幕,左右滑动可以切换页面。
首次,只有首页的内容才会加载。
其他页面,只有进入之后,才会加载。
思考分析:
需要一个菜单组件,点击后修改 tabIndex(显示哪个页面)
需要一个 ScrollTab组件,控制 手指按压事件,控制显示哪个tabIndex
需要一个 ScrollTabCol组件,包裹真正的 Page组件,来控制是否加载。
结果:
ScrollTab
需要接受一个参数(tabIndex),来控制显示那个页面。
左右滑动切换页面后,需要有一个事件,来同步 tabIndex
实现手指按压事件的逻辑
ScrollTabCol 包裹着每个页面,接受一个参数 load, 来控制当前页面是否加载。
实现过程:
首页不是重点,直接贴代码。
<script setup> import { ref } from 'vue' import ScrollTab from './components/ScrollTab.vue' import ScrollTabCol from './components/ScrollTabCol.vue' import Page from './components/Page.vue' let tabIndex = ref(0) // todo 控制显示哪个页面 let loadIndex = ref(0) // todo 控制加载哪个页面 // todo 通知页面切换 const selectChange = (value) => { tabIndex.value = value loadIndex.value = value } </script> <template> <!-- // todo 顶部菜单 --> <ul class="label-list"> <li class="label-list-item" :class="{ 'select-label-list-item': tabIndex === 0 }" @click="tabIndex = 0" >1</li> <li class="label-list-item" :class="{ 'select-label-list-item': tabIndex === 1 }" @click="tabIndex = 1" >2</li> <li class="label-list-item" :class="{ 'select-label-list-item': tabIndex === 2 }" @click="tabIndex = 2" >3</li> <li class="label-list-item" :class="{ 'select-label-list-item': tabIndex === 3 }" @click="tabIndex = 3" >4</li> <li class="label-list-item" :class="{ 'select-label-list-item': tabIndex === 4 }" @click="tabIndex = 4" >5</li> </ul> <!-- // todo 页面 --> <ScrollTab :tabIndex="tabIndex" @selectChange="selectChange"> <ScrollTabCol class="item" :loading="loadIndex === 0"> <Page msg="1"></Page> </ScrollTabCol> <ScrollTabCol class="item" :loading="loadIndex === 1"> <Page msg="2"></Page> </ScrollTabCol> <ScrollTabCol class="item" :loading="loadIndex === 2"> <Page msg="3"></Page> </ScrollTabCol> <ScrollTabCol class="item" :loading="loadIndex === 3"> <Page msg="4"></Page> </ScrollTabCol> <ScrollTabCol class="item" :loading="loadIndex === 4"> <Page msg="5"></Page> </ScrollTabCol> </ScrollTab> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body, div, body, ul, li { margin: 0; padding: 0; list-style: none; text-decoration: none; } .label-list { position: fixed; width: 100%; z-index: 100; display: flex; height: 50px; line-height: 50px; } .label-list-item { flex-grow: 1; background: #909399; color: #fff; text-align: center; } .select-label-list-item { font-weight: 600; background: #67c23a; } .item { text-align: center; background: #409eff; line-height: 400px; color: #fff; font-size: 100px; font-weight: 600; } </style>
以上就是短视频商城源码,移动端左右滑动切换页面效果实现的相关代码, 更多内容欢迎关注之后的文章