iscroll

web app开发利器 - iscroll4 解决方案 参考文章： （1）web app开发利器 - iscroll4 解决方案 （2）https://www.cnblogs.com/aaronjs/p/3147470.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4437884/blog/4907273

1. 利用 CSS 穿透覆盖默认样式 常见发生场景：假如我们需要通过 input，type="file"来上传文件，而这个 input 的默认样式，可以说是非常地 丑 。所以我们希望通过一张图片，与这个 input 大小一样，位置一致地盖在上面。这个时候，显然，这个时候点击图片，input 是不会起作用的。就是因为 img 隔绝了 click 的穿透，而我们希望的是，这个 img 只是视觉上遮挡了 input 的样式，但是点击的时候还是点击到 input。所以，只要让 img 可穿透即可。 css 代码如下： img { pointer-events : none; } 2. 实现自定义原生 select 控件的样式 由于 select 移动端原生样式很丑，但是原生弹出效果是符合我们设计的原则。直接修改 select 的样式的时候，一个奇怪的现象出现了，在 chrome 上调试的时候，自己定义的样式起了作用，在 Android 手机上也起了作用，但是到了 ios 手机上就不行了，典型的不兼容问题，这个时候禁用原生的样式即可。 css 代码如下： select { -webkit-appearance : none; } 3. 文本溢出处理 移动设备相对来说页面较小，很多时候显示的一些信息都需要省略部分。最常见的是单行标题溢出省略，多行详情介绍溢出省略。现在都用框架开发了

1,手机web-app的scroll http://www.gafish.net/api/iScroll.html#overview iScroll的历史 之所以iscroll会诞生，主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header 或是footer再加上一个可以内容的滚动的中间区域组成。 幸运的是移动webkit提供了一种强大的硬件加速的CSS属性，这个属性可以用来模拟这个缺失的功能，Iscroll从这里开始了前进之路，但是没有不带刺的玫瑰。让内容滚动像原生方式一般比想象中要难 Tigs：截至2013年，IOS5 添加如下样式 overflow:scroll; -webkit-overflow-scrolling:touch; 已经能够支持区域滚动了。但是andriod4 还是不行... 来源： oschina 链接： https://my.oschina.net/u/861562/blog/152116

iscroll的dom元素的结构是固定的，swiper是容器，scroll是需要滚动的容器，list是滚动的内容 <div class = " swiper " > <div class = " scroll " > <div class = " list " ></div> </div> </div> tips： 1、swiper定位必须为relative，并且高度设置固定值，overflow:hidden; 2、swiper的高度一定要小于scroll的高度 3、初始化uiscroll时，元素必须是显示的状态， 4、如果底部还是无法拉上去，查看list中的每个item之间是否有padding，margin(如果是上下滑动，则查看上下)，取消padding和margin 5、scroll 是你想要在多大的容器里滚动，list是真正要滚动的内容，所以scrollbar 设置为list 6、使用scroll 上下滚动到指定高度的时候，使用scrollTo,要判断最大的滚动距离maxScrollY，如果超出这个距离，会先滚到这个位置后再返回回去。 我的案例，页面中有个div容器，里面设置了两个tab，点击相互切换。div容器设置为隐藏，当点击页面中的某个按钮时，显示该div。我在页面渲染完成后，就初始化了iscroll，但是发现div滑动不了（只要一放手就回弹到初始位置）。

首先无论你要学习任何技能，必须有一个清晰的版图，什么是清晰的版图呢？首先了解你学的技术将来要从事什么工作，这个工作的条件是哪些？ 然后你要有一个非常清晰的学习大纲，切记学习任何东西都要系统，不可胡乱的瞎学浪费时间。 web前端学习路线 下面是给大家提供的一个学习大纲： 基础：HTML+CSS网站页面搭建，CS核心和PC端页面开发，HTML5移动端页面开发。 核心：web前端核心技术JavaScript，ecmasript，dom，ajax，json，正则，作用域，运动框架，核心算法，高级函数，插件封装，jQuery等。 高级：html5+高级JavaScript开发，大数据可视化，webapp交互接口，lbs定位，微信sdk，es6标准，高级算法，数据结构，插件封装。 框架：vue、react、angular企业开发应用。 企业要求：bootstrap，swiper，iscroll，sass，ps切图，网站上线等。 然后，对于一个专业知识非常强的专业，切记不要一个人蛮干，那样只会无限的让你走很多弯路，然后打击你的学习积极性，最后的结果就是不得不放弃，因为你实在学不下去了。所以学习专业知识一定要跟专业的人进行请教和交流。就好比你生病一样，你不能自己看病，你只能去找医生，因为医生比你专业，学习也是一样的道理。 学习web前端的注意事项 1.不要以看书学习为主

什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在 这里 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 better-scroll 的滚动原理 不少同学可能用过 better-scroll，我收到反馈最多的问题是： 我的 better-scroll 初始化了， 但是没法滚动。 不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。 那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构： < div class = "wrapper" > < ul class = "content" > < li >... </ li > < li >... </ li > ... </ ul > </ div > 为了更加直观，我们再来看一张图： 绿色部分为 wrapper，也就是父容器，它会有固定的高度

当 better-scroll 遇见 Vue 在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了。 以滴滴为例，可以是这样竖向滚动的列表，如图所示： 也可以是横向滚动的导航栏，如图所示： 可以打开“微信 —> 钱包—>滴滴出行”体验效果。 我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll。 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在 这里 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 better-scroll 的滚动原理 不少同学可能用过 better-scroll，我收到反馈最多的问题是： 我的 better-scroll 初始化了， 但是没法滚动。 不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。 那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的

1.无法滑动的问题 　　需要检查iscroll.js文件加载上没有，如果加载上检查一下它和jquery文件加载的先后顺序。wrapper的position必须得写，bottom也必须得写。 2.滑不上去的问题 　　wrapper的height设置成了100%。所以出现这个问题，把这个属性去掉了好了 3.页面滑动不流畅（这样是暂时行可以，还没找到更好的解决办法）　　 　 #scroller { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); } 4.点击input框、select等表单元素时没有响应，这个问题原因在于iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了，解决的方法是，在iscroll4源码里面找到这一行， onBeforeScrollStart: function (e) { e.preventDefault(); } 然后把它改成： onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget？ e.explicitOriginalTarget.nodeName

Vue-Echarts vue-echarts是封装后的vue插件， 基于 ECharts v4.0.1 + 开发，依赖 Vue.js v2.2.6 +，功能一样的只是把它封装成vue插件 这样更方便以vue的方式去使用它。 Demo GitHub Repo Vue-Pikaday 一个简单而灵活的自定义指令，用于在Vue.js（v2.xx）应用程序中使用 Pikaday 。 Demo GitHub Repo Vue-particles Vue粒子特效 Demo 　　GitHub Repo better-scroll BetterScroll是一个插件，旨在解决移动端的滚动环境（已支持PC）。核心的灵感来自 iscroll 的实现，因此 BetterScroll 的API总体上与iscroll兼容。更重要的是，BetterScroll还扩展了一些功能并根据iscroll优化了性能。 Demo GitHub Repo vue-video-player 一款视频播放器 Demo GitHub Repo vue-quill-editor 基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。 Demo GitHub Repo vue-countTo vue-countTo是一个无依赖，轻量级的vue组件，可以自行覆盖easingFn。 Demo GitHub

1 <div id="picBox" style="overflow: hidden;"> 2 <ul class="hotPic" style="display:flex;padding-bottom:15px;"> 3 {loop $news_category $item} 4 <li class="hotImg " style="position: relative;"> 5 <a href="#" style="width:103px;"> 6 <img class="hotImg1" src="./resource/attachment/{$item['thumb']}" alt=""> 7 <div style="width:96%;height:103px; 8 position: absolute;top:0;left:0;"> 9 {if $item['isrecommand'] == 1} 10 <span style="display: block;width:40px;height:26px;line-height:26px;text-align: center; 11 font-size:16px;color:#fff;background-color:rgb(255,102,102);margin-bottom:-26px;"> 12 活动 13 <