WAP三区块滑动交互效果
WAP 页面的三区块滑动效果，算是老前端们都玩过的一套经典交互。划分成三个区域——导航、内容、广告，分别滑动切换，挺适合早期那种小屏幕功能机的页面。嗯，现在虽然不怎么主打 WAP 了，但这种轻量级的滑动思路，在低端设备、运营页或者内嵌 H5 里，还蛮有参考价值的。
响应式布局挺关键，毕竟手机屏幕五花八门。你可以用媒体查询来根据宽度变形布局，也可以用百分比+flex 搞定弹性结构，反正目标就是——别让页面炸了。
滑动切换核心靠的是 JavaScript 监听触摸事件，比如touchstart、touchmove和touchend。监听完位置变化，再配合transform: translateX()就能滑了。动效嘛，靠transition加点缓动就行。
如果你懒得自己封装，jQuery Mobile和zepto.js都挺好用，API 比较友好，而且体积也小。是 zepto，压缩后才几十 K，放 WAP 项目里完全没压力。
加载优化也不能少。内容多的时候，建议用懒加载。你可以监听滑动区块的进入事件，到了再加载图片或者文字，响应也快，流量也省。
动画太多会拖性能，尤其是在老设备上。所以requestAnimationFrame可以用起来，动画就会更顺滑。而且代码尽量别写太复杂，逻辑清晰、结构扁平最靠谱。
想直接看怎么做？你可以看看文件texiao1597_1560680928，估计是带 HTML/CSS/JS 的完整 DEMO。调一调，改一改，就能用在你自己的页面上了。
另外，有兴趣深入的可以看看这些：
如果你手头有老项目、低端机兼容需求，或者就是想做个轻巧的 H5 页面，三区块滑动效果，还挺值得一试。
下载地址
用户评论
