滚动居中，移动端H5 Tab页面流畅体验大揭秘

2023-08-25 10:27:28

移动端H5 Tab页面滚动居中：打造流畅的滚动体验

简介

随着智能手机的普及，移动端H5页面已成为人们上网冲浪的必备工具。而其中，Tab页面更是随处可见，因为它可以方便地将不同内容分类展示，让用户快速找到所需信息。然而，许多H5 Tab页面的滚动体验却并不理想，要么滚动不流畅，要么滚动距离计算不准确。本文将深入探讨移动端H5 Tab页面滚动居中的实现原理，并提供Vue、React和微信小程序的示例代码，帮助你打造流畅的滚动体验。

滚动本质与计算公式

滚动本质上是页面内容在固定视口内上下移动的过程。而对于移动端H5 Tab页面来说，滚动居中意味着当用户滚动Tab页面时，当前选中的Tab项始终位于视口中间位置。要实现这一效果，需要计算出当前选中的Tab项距离视口顶部的距离，并将该距离作为滚动距离。滚动距离的计算公式如下：

滚动距离 = 当前选中的Tab项距离视口顶部的距离 - 视口高度的一半

Vue示例代码

在Vue中，可以使用Vue.nextTick()方法来获取当前选中的Tab项距离视口顶部的距离，然后将该距离作为滚动距离。代码示例如下：

<template>
  <div class="tab-container">
    <div class="tab-nav">
      <div class="tab-item" v-for="tab in tabs" :key="tab.id" @click="selectTab(tab)">
        {{ tab.label }}
      </div>
    </div>
    <div class="tab-content">
      <div class="tab-pane" v-for="tab in tabs" :key="tab.id" :style="{ display: tab.selected ? 'block' : 'none' }">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 1, label: 'Tab 1', content: 'Content 1', selected: true },
        { id: 2, label: 'Tab 2', content: 'Content 2', selected: false },
        { id: 3, label: 'Tab 3', content: 'Content 3', selected: false }
      ],
      selectedTabIndex: 0
    };
  },
  methods: {
    selectTab(tab) {
      this.selectedTabIndex = tab.id;
      this.$nextTick(() => {
        const tabItem = this.$refs[`tab-item-${tab.id}`];
        const scrollDistance = tabItem.offsetTop - (window.innerHeight / 2);
        window.scrollTo({ top: scrollDistance, behavior: 'smooth' });
      });
    }
  }
};
</script>

<style>
.tab-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.tab-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-item {
  margin: 0 10px;
  padding: 10px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
}

.tab-item.active {
  color: #000;
  border-bottom: 2px solid #000;
}

.tab-content {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: calc(100% - 40px);
  overflow-y: scroll;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}
</style>

React示例代码

在React中，可以使用useEffect()钩子来获取当前选中的Tab项距离视口顶部的距离，然后将该距离作为滚动距离。代码示例如下：

import React, { useState, useEffect } from 'react';

const Tab = ({ label, content }) => {
  const [selected, setSelected] = useState(false);

  useEffect(() => {
    if (selected) {
      const tabItem = document.getElementById(`tab-item-${id}`);
      const scrollDistance = tabItem.offsetTop - (window.innerHeight / 2);
      window.scrollTo({ top: scrollDistance, behavior: 'smooth' });
    }
  }, [selected]);

  return (
    <div className="tab-item" id={`tab-item-${id}`} onClick={() => setSelected(true)}>
      {label}
    </div>
  );
};

const TabContent = ({ content }) => {
  return (
    <div className="tab-pane">
      {content}
    </div>
  );
};

const App = () => {
  const [tabs, setTabs] = useState([
    { id: 1, label: 'Tab 1', content: 'Content 1' },
    { id: 2, label: 'Tab 2', content: 'Content 2' },
    { id: 3, label: 'Tab 3', content: 'Content 3' }
  ]);

  const [selectedTabIndex, setSelectedTabIndex] = useState(0);

  const selectTab = (index) => {
    setSelectedTabIndex(index);
  };

  return (
    <div className="tab-container">
      <div className="tab-nav">
        {tabs.map((tab, index) => (
          <Tab
            key={tab.id}
            id={tab.id}
            label={tab.label}
            content={tab.content}
            selected={index === selectedTabIndex}
            onClick={() => selectTab(index)}
          />
        ))}
      </div>
      <div className="tab-content">
        {tabs.map((tab, index) => (
          <TabContent
            key={tab.id}
            content={tab.content}
            selected={index === selectedTabIndex}
          />
        ))}
      </div>
    </div>
  );
};

export default App;

微信小程序示例代码

Page({
  data: {
    tabs: [
      { id: 1, label: 'Tab 1', content: 'Content 1', selected: true },
      { id: 2, label: 'Tab 2', content: 'Content 2', selected: false },
      { id: 3, label: 'Tab 3', content: 'Content 3', selected: false }
    ],
    selectedTabIndex: 0
  },
  selectTab(e) {
    const tabIndex = e.currentTarget.dataset.index;
    this.setData({
      selectedTabIndex: tabIndex
    });
    const tabItem = wx.createSelectorQuery().select(`#tab-item-${tabIndex}`);
    tabItem.boundingClientRect(rect => {
      const scrollDistance = rect.top - (wx.getSystemInfoSync().windowHeight / 2);
      wx.pageScrollTo({
        scrollTop: scrollDistance,
        duration: 300
      });
    }).exec();
  }
});