横向滑动页面，导航条滑动居中的 js 实现思路

最近在做新闻咨询页的项目，各个新闻频道通过横向滑动切换，顶部的导航active栏需要跟着切换到对应频道，并且active到达中部时，要一直处在中间。类似效果就是uc浏览器《UC头条》的导航栏滑动居中一样。

写出来挺有成就感的，做个记录。使用的框架是vue，但思路无关框架。

首先看html的结构，

<ul><li class='active'>娱乐</li><li>要闻</li><li>体育</li>
</ul>

目的是需要动态设置ul的位置，可以设置绝对定位调整left值，也可以用css3的translateX

那首先需要拿到active 对应li 标签的位置，实现的关键是这2个方法

offsetLeft 获取当前元素相对于父元素的left值

getBoundingClientRect() 获取当前元素相对于视口（viewport）的位置,宽高等属性。

首先需要获得居中的位置 = （window.innerWidth - li的宽度） / 2;

公式： ul目标位置 = li相对于父元素的left值 - 居中的位置。

          let li = document.querySelector('.active');let ul = document.querySelector('ul');let window_offsetWidth = window.innerWidth; //屏幕宽度;if (dom) {let domoffsetWidth = dom.offsetLeft,//中间值 =( 屏幕宽度 - li宽度 ) / 2;diffWidth = (window_offsetWidth - dom.getBoundingClientRect().width) / 2,//目标值 = offset - 中间值targetOffset = -(domoffsetWidth - diffWidth);let ul_width = ul.getBoundingClientRect().width;//开始if (-targetOffset < 0) {ul.style.left = '0px';return;}//末尾if(targetOffset <  window_offsetWidth - ul_width ){ul.style.left = window_offsetWidth - ul_width + "px"return;}//正常ul.style.left = targetOffset + 'px';

以上代码，每次active切换的时候都需要执行，计算一次。我这里用vue的 watch 事件监听active绑定变量的变化来实现的

转载于:https://www.cnblogs.com/lijinwen/p/8434284.html

横向滑动页面，导航条滑动居中的 js 实现思路相关推荐

小程序的横向二级顶部导航条，可以切换、拖动、二级定位在一级的下面，高度怎么办
项目场景: **做一个小程序的横向二级顶部导航条,可以切换.拖动.二级定位在一级的下面** 问题描述: 我只能设置scroll-view的高度,不然不显示二级菜单这是html代码 <view ...
使用QML自绘页面导航条
使用QML自绘页面导航条最近使用QML制作项目,按照要求,需要制作成分页的插件.遗憾的是,QML的控件库Qt Quick都没有现成的控件,于是我尝试着自己实现自绘页面导航条. 原创文章,反对未声明的 ...
uni-app 设置页面导航条颜色
下述两种方法中颜色限制为十六进制颜色. 1.pages.json页面路由中,用style设置每一个页面的导航栏背景颜色如: { "pages": [{ " ...
JS控制网页滑动顶部导航条变色
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
Bootstrap-综合案例-编写课程页面-导航条
第一步:导入bootstrap <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
使用jQuery实现导航条滑动块效果
html部分: <div id="navMenu"> <ul> <li class="active"><a href= ...
卡片左右滑动带动任务条滑动 vue
接到一个任务,做一个活动卡片,卡片左右滑动带动卡片上方的任务条走到对应节点: 1.卡片和任务条均为动态生成 2.卡片底部可以左右滑动 3.当一张卡片超过50%的区域展示出来后放手,定位到对应卡片 4. ...
Android ViewPager和Fragment实现顶部导航界面滑动效果
在项目中,我们常常需要实现界面滑动切换的效果.例如,微信界面的左右滑动切换效果.那这种效果是怎么实现的?今天我就带大家简单了解ViewPager,并通过实例来实现该效果. 一. ViewPager 官 ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言 navigationBarTitleText用于小程序设置当前页面标题,可以给每个页面设置独立的标题,但是这样不能满足一些特殊业务场景:比如说商城,商品详情页面的标题,会根据获取到的数据动态修改 ...

横向滑动页面，导航条滑动居中的 js 实现思路

横向滑动页面，导航条滑动居中的 js 实现思路相关推荐

最新文章

热门文章