jQuery移动端可点击滑动导航
可点击的顶部导航+自动滑动切换,挺适合移动端的轻应用页面。用的还是熟悉的 jQuery,逻辑简单,动效流畅,体验还不错。点导航项能直接跳转,滑动切换也顺手,适合做选项卡、内容页切换这类场景。
移动端的导航嘛,主要难点还是在手势交互和空间有限这两块。这套方案就把导航和滑动整合到一起了,既能点也能滑,挺省事的。实现上大多是 touchstart
+ touchmove
搭配 animate()
,要是你熟 jQuery,基本一眼就能看懂。
结构也清爽,通常是 ul
列表装菜单项,滑动区域是 div.content
之类的。像下面这种滑动逻辑:
$('.nav-item').on('click', function() {
var index = $(this).index();
$('.content').animate({left: -index * screenWidth}, 300);
});
是不是眼熟?配点媒体查询,再做下 响应式布局,手机和平板都能用。
如果你考虑做个 类原生 App 的 Web 页,比如活动页、商城、后台的移动端版,这类导航交互真是刚刚好。还能配合点 Swiper 或 tab 切换 组件,一起用效果更佳。
小建议:
- 手势交互里加个
preventDefault()
,防止页面乱滚 - 用
requestAnimationFrame
替代animate()
时动画更丝滑 - 考虑下 可访问性,按钮别忘加
aria
属性
资源打包在 texiao7230_1560680929
,里面有 index.html
、style.css
和主逻辑的 main.js
,直接跑看看效果也行。用惯了 jQuery 的你会觉得,这东西还是挺顺手的。
下载地址
用户评论