vue项目实现Tab页面触底上拉切换下个Tab

 

如题，实现Tab页面触底上拉切换下一Tab的功能，关键流程：下滑触底——显示“上拉切换下一页”——继续上拉超过一定距离（如100px)——切换下一页，重置相关参数。

关键代码：

一. 处理滚动的业务逻辑封装为goodsListScroll.js，代码如下：

//触底上拉切换下一页相关代码
export default {props: {last_tab: false, //是否是最后一个tab
  },data() {return {startY: 0,maxScroll: 0, //最大可滚动距离showHint: false, //底部显示切换下一页提示条      touchStart: false, //触摸开始置为true,触发Tab切换后重置为false,终止handleTouchMove中的逻辑isScrolling: false, //显示“切换下一Tab”后触摸开始标记为true、切换Tab后重置为false
    };},beforeDestroy() {// 移除事件监听this.$refs.container.removeEventListener('touchstart', this.handleTouchStart);this.$refs.container.removeEventListener('touchmove', this.handleTouchMove);},methods: {//重新计算最大滚动值（因为内容可能变化），获取商品列表后调用
    calculateMaxScroll() {if (this.$refs.container) {const element = this.$refs.container;this.maxScroll = element.scrollHeight - element.clientHeight;//不可滚动页面直接显示        if (this.maxScroll === 0 && (this.active < this.subCateList.length - 1)) {this.showHint = true}}},//容器滚动监听事件
    handleScroll(event) {const element = event.target;this.scrollTop = element.scrollTop;// 计算滚动百分比this.scrollPercentage = this.maxScroll > 0 ?Math.min(100, Math.round((this.scrollTop / this.maxScroll) * 100)) :0;// 检查是否滚动到底部if (element.scrollHeight == element.clientHeight) return; //初始化的时候高度会相等const isAtBottom = element.scrollHeight - element.scrollTop <= element.clientHeight + 10;// 显示或隐藏提示if (this.active < this.subCateList.length - 1) this.showHint = isAtBottom;},/*** @param {Object} e* 触摸开始标记，必须在这里设置，切换tab后置为false，终止handleTouchMove*/handleTouchStart(e) {this.touchStart = true},/*** 下滑触底上拉切换tab* 1. touchStart:触摸开始标志，切换tab后为false，终止代码执行* 2. isScrolling:页面上拉触底后置为true,同时记录当前位置作为滑动开始位置* 3. startY:计算触底上拉的初始位置,与实际触摸开始无关*/handleTouchMove(e) {//1. 滑动过程中已经触发过Tab切换的就不再执行if (!this.touchStart) return;//2. 已触底且isScrolling为false时获取滑动的位置，并将isScrolling置为trueif (this.showHint && !this.isScrolling) {this.isScrolling = true//3. 设置计算滑动距离的初始位置this.startY = e.touches[0].clientY;}//滑动过程中实时获取当前位置，并计算滑动距离const currentY = e.touches[0].clientY;const deltaY = this.startY - currentY; // 正值表示向上滑动// 只有向上滑动才处理if (deltaY > 0) {// 当向上滑动距离超过100px时触发切换if (deltaY > 100) {this.switchToNextTab();}}},//切换至下一个Tab
    switchToNextTab() {// 移除事件监听this.$refs.container.removeEventListener('touchstart', this.handleTouchStart);this.$refs.container.removeEventListener('touchmove', this.handleTouchMove);if (this.active < this.subCateList.length - 1) {this.active = this.active + 1//重置其他参数this.touchStart = falsethis.showHint = false;this.isScrolling = false;this.startY = 0;this.maxScroll = 0}}}
};

以上为完整代码，关键点有这些：

1. calculateMaxScroll()：计算容器最大滚动值，在获取到商品列表数据后调用，不可滚动页面直接显示“上拉切换下一页”提示条；

2. handleScroll()：商品列表容器滚动监听事件，针对可滚动页面在滑动到页面底部时，显示“上拉切换下一页”提示条；

3. handleTouchStart()：滑动开始事件，将滑动开始标志touchStart置为true;

4. handleTouchMove()：滑动过程监听，触底上拉超过一定距离，触发切换下一Tab的逻辑switchToNextTab();

5. switchToNextTab()：切换下一Tab逻辑，移除滚动监听，所有相关参数重置。

代码中已经加了详细的注释，可以结合注释来看。

二. 页面相关代码：

<template><div id="container" class="h100" ref="container" @scroll="handleScroll"><!--tab栏--><van-tabs id="tabs" class="p_fixed top left w100" v-model="active" :title-active-color="redColor" :background="primaryColor" :color="primaryColor" title-inactive-color="#a8a8a8" swipe-threshold="4" sticky><van-tab v-for="(item,index) in cateList" :title="item.title"></van-tab></van-tabs><!--商品列表栏--><div class="goods_list w100 flex space_between" v-show="goodsList"><!--商品列表展示代码--></div><!--触达切换tab--><div v-if="!last_tab" class="switch-hint p_fixed c_f flex center f12" :class="{ show: showHint,hide:!showHint&&startY==0 }">上拉切换下一页</div></div>
</template><script>import { Tabs, Tab } from 'vant';import goodsListScroll from "@/assets/js/mixin/goodsListScroll.js"export default {name: "CateGoods",mixins: [goodsListScroll],components: {Nodata,[Tab.name]: Tab,[Tabs.name]: Tabs},data() {return {active: 0,cateList: '', //子分类列表
        goodsList: '', //瀑布流商品列表   
      }},watch: {//监听tab选择索引，获取对应的商品列表
      active(newValue, oldValue) {if (newValue > -1) {this.goodsList = ''let sub_rack_id = this.subCateList[this.active].sub_rack_id//获取商品列表this.getGoodsList(sub_rack_id, this.rack_id)}}},methods: {/*** @param {Object} rack_id* 获取商品列表*/getGoodsList(rack_id, rack_parent_id) {//调用接口获取商品列表数据，这里代码省略//获取商品列表后监听页面滚动if (!this.last_tab) {// 确保DOM更新后计算最大滚动值this.$nextTick(() => {this.scrollTopFn()// 添加触摸事件监听this.$refs.container.addEventListener('touchstart', this.handleTouchStart, { passive: false });this.$refs.container.addEventListener('touchmove', this.handleTouchMove, { passive: false });//计算页面可以滚动距离this.calculateMaxScroll();});}} else {this.goodsList = []}});}
</script><style lang="scss" scoped>#container {overflow-y: scroll;}/*滚动触底上拉切换下一个Tab相关样式*/.switch-hint {bottom: 30px;left: 50%;transform: translateX(-50%);background: rgba(0, 0, 0, 0.7);padding: 12px 30px;border-radius: 25px;opacity: 0;transition: opacity 0.5s, transform 0.5s;pointer-events: none;z-index: 100;}.switch-hint.show {opacity: 1;transform: translateX(-50%) translateY(-10px);}.switch-hint.hide {transition: none;}
</style>

如上，页面+goodsListScroll即可实现Tab页面的触底上拉切换下一Tab的功能。

其中添加“上拉切换下一页”是为了优化用户体验，如果没有提示条，直接切换回显的有些突兀。