移动端滚动方案：better-scroll
BetterScroll 是什么 BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window)的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。 官方文档：BetterScroll 官方Demo：示例 为什么不能滚动：滚动原理 绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 BetterScroll 的滚动原理。 在项目中使用 基本HTML结构 <div class="container"> <header class="header-wrapper"> <div ...
三、移动端轮播图的实现
布局 <div id="app"> <div id="swiper-container"> <!-- 幻灯片的结构 --> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./img/1.jpg"></div> <div class="swiper-slide"><img src="./img/2.jpg"></div> <div class="swiper-slide"><img src="./img/3.jpg"></div> <div class="swiper-slide"><img src="./img/4.jpg"></div> <div class="swiper-slide"><img src="./img/5.jpg"></div> </div> <!-- 导航点 ...
二、移动端的适配问题
尺寸适配 只需要将viewport width等于设计稿的宽度即可。 <meta name='viewport' content='width=750,user-scalable=no'> less与rem适配 less文件 @font-size: 设计稿的宽度 / 10rem; #box{ width: 200/@font-size; height: 100/@font-size; } 使用js做根元素的调整 document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; window.onresize = function () { document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; }
一、移动端的事件
视口控制 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no, maximum-scale=1.0, minimum-scale=1.0" /> 事件 var box = document.querySelector('#box') // 元素上触摸开始时触发 box.addEventListener('touchstart', function () { box.style.backgroundColor = 'red' }) // 元素上触摸移动时触发 box.addEventListener('touchmove', function () { box.style.backgroundColor = 'yellow' console.log('touchmove触发了！') }) // 手指从元素上离开时触发 box.addEventListener('tou ...
