这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

移动端 H5 Tab 如何滚动居中

Tab 在 PC 端、移动端应用都上很常见,不过 Tab 在移动端 比 PC 端更复杂。为什么呢?移动端设备屏幕较窄,一般仅能展示 4 ~ 7 个 Item。考虑到用户体验,UI 往往要求程序员实现一个功能——点击 Item 后,Item 滚动到屏幕中央,拼多多的 Tab 就实现了这个功能。

如果你也想实现这个功能,看了这篇文章,你一定会有所收获。我会先说明 Tab 滚动的本质,分析出滚动距离的计算公式,接着给出伪代码,最后再给出 Vue、React 和微信小程序的示例代码。

Tab 滚动的本质

Tab 滚动,本质是包裹着 Item 的容器在滚动。

如下图,竖着的虚线长方形代表手机屏幕,横着的长方形代表 Tab 的容器,标着数字的小正方形代表一个个 Tab Item。

左半部分中,Tab 容器紧贴手机屏幕左侧。右半部分中,Item 4 位于屏幕中央,两部分表示 Item 4 从屏幕右边滚动到屏幕中央。

不难看出,Item 4 滚动居中,其实就是容器向左移动 distance。此时容器滚动条到容器左边缘的距离也是 distance。

换句话说,让容器向左移动 distance,Item 4 就能居中。 因此只要我们能找出计算 distance 的公式,就能控制某个 Item 居中。

计算 distance 的公式

该如何计算 distance 呢?我们看下方这张更细致的示意图。

屏幕中央有一条线,它把 Item 4 分成了左右等宽的两部分,也把手机屏幕分成了左右等宽的两部分。你可以把 Item 4 一半的宽度记为 halfItemWidth,把手机屏幕一半的宽度记为 halfScreenWidth。再把 Item 4 左侧到容器左侧的距离记为 itemOffsetLeft

不难看出,这四个值满足如下等式:

distance + halfScreenWidth = itemOffsetLeft + halfItemWidth

简单推导一下,就得到了计算 distance 的公式。

distance = itemOffsetLeft + halfItemWidth - halfScreenWidth

公式的伪代码实现

现在开始解释公式的代码实现。

先看下 itemOffsetLefthalfItemWidthhalfScreenWidth 如何获取。

  • itemOffsetLeft 是 Item 元素到容器左侧的距离,你可以用 HTMLElement.offsetLeft 作它的值。

  • halfItemWidth 是 Item 元素一半的宽度。HTMLElement.offsetWidth 是元素的整体宽度,你可以用 offsetWidth / 2 作它的值,也可以先用 Element.getBoundingClientRect() 获取一个 itemRect 对象,再用 itemRect.width / 2 作它的值。

  • halfScreenWidth 是手机屏幕一半的宽度。 window.innerWidth 是手机屏幕的整体宽度,你可以用 innerWidth / 2 作它的值。

再看下如何把 distance 设置到容器上。

在 HTML 中,我们可以使用 Element.scrollLeft 来读取和设置元素滚动条到元素左边的位置。因此,你只需要容器的 scrollLeft 赋值为 distance,就可以实现 Item 元素滚动居中。

现在给出点击 tab 的函数的伪代码:

const onClick = () => {
const itemOffsetLeft = item.offsetLeft;
const halfItemWidth = item.offsetWidth / 2;
const halfScreenWidth = window.innerWidth / 2;
tabContainer.scrollLeft = itemOffsetLeft + halfItemWidth - halfScreenWidth
}

代码示例

Vue

Tab 滚动居中 | Vue

React

Tab 滚动居中 | React

微信小程序

Tab 滚动居中 | 微信小程序

小程序的 API 和浏览器的 API 有差异。

  • itemOffsetLeft ,你需要从点击事件的 event.currentTarget 中获取。
  • halfItemWidth,你需要先用 wx.createSelectorQuery() 选取到 Item 后,从 exec() 的执行结果中获取到 Item 整体宽度,然后再除以 2。
  • halfScreenWidth,你需要先用 wx.getSystemInfoSync() 获取屏幕整体宽度,然后再除以 2。

至于把 distance 设置到容器上,微信小程序 scroll-view 组件中,有 scroll-left 这个属性,你可以把 distance 赋值给 scroll-left

本文转载于:

https://juejin.cn/post/7322730720732921867

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--移动端 H5 Tab 如何滚动居中的更多相关文章

  1. 移动端H5页面惯性滑动监听

    移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...

  2. Web端的Tab控件在切换Tab时Load数据出错的处理

    我们在应用Web端的Tab控件时,不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题,在Tab1正在加载数据的时候我们切换到Tab2,再切换回来,Load数据的控件就会出错,出错 ...

  3. 移动端H5制作安卓和IOS的坑 持续更新...

    移动端H5制作安卓和IOS的坑 持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来, ...

  4. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  5. 移动端H5活动页优化方案

    背景 项目:移动端H5电商项目 痛点:慢!!! 初始方案:最基本的图片懒加载,静态资源放到cdn,predns等等已经都做了.但是还是慢,慢在哪? 显而易见的原因:由于前后端分离,所有的数据都由接口下 ...

  6. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  7. 移动端H5适配方法(盒子+图片+文字)

    一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...

  8. 六一广告页H5全屏滚动效果实现

    明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...

  9. 移动端H5开发遇到的问题及解决方法

    本篇文章给大家带来的内容是关于移动端H5开发遇到的问题及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信分享签名错误invalid signature vue单页应用hi ...

  10. 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)

    | 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...

随机推荐

  1. 从零开始的react入门教程(七),react中的状态提升,我们为什么需要使用redux

    壹 ❀ 引 在前面的文章中,我们了解到react中的数据由props与State构成,数据就像瀑布中的水自上而下流动,属于单向数据流.而这两者的区别也很简单,对于一个组件而言,如果说props是外部传 ...

  2. Ubuntu20.04和22.04离线安装PostgreSQL14

    今天安装 Postgresql14 遇到一个问题, 目标服务器只有内网, 内网提供标准的apt仓库, 但是因为不能连接外网, 所以没法添加第三方仓库, 这样安装pg14就成了问题. 从pg的官网看, ...

  3. ELK Stack 分布式日志系统 大纲

    1. Elastic Stack 官网: https://www.elastic.co/cn/what-is/elk-stack 2. 硬件配置 2.1 推算依据 ES JVM heap 最大可以设置 ...

  4. Java实现文件下载断点续传(一)

    参考文章:https://www.ibm.com/developerworks/cn/java/joy-down/ 1.原理介绍 想象一下我们下载一个10G的文件,当下载到9.99G的时候断网了... ...

  5. P3374 【模板】树状数组 1(线段树)

    [模板]树状数组 1 题目描述 如题,已知一个数列,你需要进行下面两种操作: 将某一个数加上 x 求出某区间每一个数的和 输入格式 第一行包含两个正整数 n,m ,分别表示该数列数字的个数和操作的总个 ...

  6. 【Android 逆向】【攻防世界】easyjni

    1. apk 安装到手机,提示需要输入flag 2. jadx打开apk public class MainActivity extends c { static { System.loadLibra ...

  7. 程序员应具备的PS基本技能(二):程序员切图最常使用的工具组-选择工具组

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  8. flask操作mongodb

    一个简单的注册登录 from pymongo import MongoClient MC = MongoClient('127.0.0.1', 27017) MongoDB = MC['s2'] #创 ...

  9. 内存管理(二)之别小看了Tagged-Pointer关键时刻起到大作用

    本文主要研究Tagged Pointer技术,针对该技术需要解决的问题.以及在实际应用中的价值做一些简单的探讨. 如果你想要更进一步,去挖掘Tagged Pointer是如何实现的,可以参考Frida ...

  10. 无依赖单机尝鲜 Nebula Exchange 的 SST 导入

    本文尝试分享下以最小方式(单机.容器化 Spark.Hadoop.Nebula Graph),快速趟一下 Nebula Exchange 中 SST 写入方式的步骤.本文适用于 v2.5 以上版本的 ...