短视频商城源码，移动端左右滑动切换页面效果

短视频商城源码，移动端左右滑动切换页面效果实现
功能分析：
点击顶部菜单可以跳转到对应的页面。
按压屏幕，左右滑动可以切换页面。
首次，只有首页的内容才会加载。
其他页面，只有进入之后，才会加载。

思考分析：
需要一个菜单组件，点击后修改 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>

 

 

以上就是短视频商城源码，移动端左右滑动切换页面效果实现的相关代码， 更多内容欢迎关注之后的文章