登录注册
京东自营 + 国补 iPhone 历史最低价          国家补贴 享8折

欢马劈雪

  • Webpack 配置 React 开发环境

    Webpack是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能，并且如果有需要它还可以被整合到其他比如Grunt / Gulp 的工作流。安装 Webpack：npm install -g webpackWebpack 使用一个名为 webpack.config.

    欢马劈雪
    webpack， 配置， react， 开发环境， 入门教程

  • 开发环境配置

    要搭建一个现代的前端开发环境配套的工具有很多，比如 Grunt / Gulp / Webpack/ Broccoli，都是要解决前端工程化问题，这个主题很大，这里为了使用 React 我们只关注其中的两个点：JSX 支持ES6 支持好消息是业界领先的 ES6 编译工具 Babel 随着作者被 Facebook 招入麾下，已经内置了对 JSX 的支持，我们只需要配置 Babel 一个编译工具就可以了，配合 webpack 非常方便。

    欢马劈雪
    开发环境， 配置， react， 入门教程

  • React 概览

    React 的核心思想是：封装组件。各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM元素，然后操作 DOM 去更改 UI。React 大体包含下面这些概念：组件JSXVirtual DOMData Flow这里通过一个简单的组件来快速了解这些概念，以及建立起对 React 的一个总体认识。

    欢马劈雪
    react， 概览， 入门教程

  • React 入门教程

    按照惯例，在介绍一个新技术之前总是要为它背书的，作为 React受众在开始接触之前肯定会有一些喜闻乐见的疑问：为什么不用 Backbone？为什么不用 Angular？...在没有真正使用之前，其实没法评价哪一个好，没有最好的，只有最合适的，如 WhyReact 所说，Give it fiveminutes，希望你能克服初次遇到JSX 这种存在的偏见去尝试一下。

    欢马劈雪
    react， 入门教程

  • 销毁

    Destroy在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。myScroll.destroy();myScroll = null;

    欢马劈雪
    销毁， iscroll-5， api， 中文版

  • 滚动条信息

    iScroll存储了很多有用的信息，您可以使用它们来增强您的应用。你可能会发现有用的：myScroll.x/y，当前位置myScroll.directionX/Y，最后的方向 (-1 down/right, 0 still, 1 up/left)myScroll.currentPage，当前对齐捕获点下面是关于处理时间的代码示例：myScroll = new IScroll('#wrapper');myScroll.on('scrollEnd', function () { if ( this.x <

    欢马劈雪
    滚动条， 信息， iscroll-5， api， 中文版

  • 按键绑定

    你可以激活keyBindings选项来支持键盘控制。默认情况下iScroll监听方向键，上下翻页建，home/end键，但这些按键绑定完全可以自定义。你可以通过传递一个包含按键代码列表的对象来进行按键绑定。

    欢马劈雪
    按键， 绑定， iscroll-5， api， 中文版

  • 自定义事件

    options.resizePollingiScroll还提供额一些你可以挂靠的有用的自定义事件。使用on(type, fn)方法注册事件。myScroll = new IScroll('#wrapper');myScroll.on('scrollEnd', doSomething);上面的代码会在每次滚动停止是执行doSomething方法。可以挂靠的事件如下：beforeScrollStart，在用户触摸屏幕但还没有开始滚动时触发。scrollCancel，滚动初始化完成，但没有执行。

    欢马劈雪
    自定义， 事件， iscroll-5， api， 中文版

  • 掌握刷新方法

    iScroll需要知道包装器和滚动器确切的尺寸，在iScroll初始化的时候进行计算，如果元素大小发生了变化，需要告诉iScroll DOM发生了变化。下面将提供调用refresh方法的正确时机。每次触摸DOM，浏览器渲染器重绘页面。一旦发生了重画我们可以安全地读新的DOM属性。重新绘制阶段不是瞬时发生的只是范围结束时触发。这就是为什么我们需要给渲染器刷新iScroll之前一点时间。

    欢马劈雪
    掌握， 刷新， 方法， iscroll-5， api

  • 高级选项

    下面这些选项主要针对核心开发人员。options.bindToWrappermove事件通常绑定到文档而不是滚动器容器（wrapper）。当你在滚动器容器（wrapper）外移动光标/手指，滚动条将不断滚动。这通常是你想要的,但是你也可以绑定事件转移到滚动器容器（wrapper）本身。这样做一旦指针离开了容器，滚动就会停止。Default: false默认值：falseoptions.

    欢马劈雪
    高级选项， iscroll-5， api， 中文版

  • 无限滚动

    iScroll集成了一套智能缓存系统，它允许对一堆近乎无限的元素的数据进行处理和重用。目前无限滚动还处于早期开发阶段，所以虽然当前版本已经足够稳定，但是还没有做好广泛推广的准备。具体示例请参考 无限滚动示例 ，并请提交你的建议和报告bug。作者将会尽可能快的将功能变更的细节添加上来。

    欢马劈雪
    无限， 滚动， iscroll-5， api， 中文版

  • 缩放

    为了使用缩放功能，你最好使用iscroll-zoom.js脚本。options.zoom此属性设置为true启用缩放功能。默认值：falseoptions.zoom最大缩放级数。默认值：4options.zoom最小缩放级数。默认值：1options.zoom初始的缩放级数。默认值：1options.zoom鼠标滚轮的动作可以设置为'zoom'，这样在滚动滚轮时缩放操作会代替原来的滚动操作。

    欢马劈雪
    缩放， iscroll-5， api， 中文版

  • 对齐

    iScroll能对齐到固定的位置和元素。options.snap最简单的对齐配置如下：var myScroll = new IScroll('#wrapper', { snap: true});这将按照页面容器的大小自动分割滚动条。snap属性也可以传递字符类型类型的值。这个值是滚动条将要对齐到的元素的选择器。比如下面：var myScroll = new IScroll('#wrapper', { snap: 'li'});

    欢马劈雪
    对齐， iscroll-5， api， 中文版

  • 指示器

    上面所有关于滚动条的选项实际上是包装了一个底层的选项indicators。

    欢马劈雪
    指示器， iscroll-5， api， 中文版

  • 滚动条

    滚动条不只是像名字所表达的意义一样，在内部它们是作为indicators的引用。一个指示器侦听滚动条的位置并且现实它在全局中的位置，但是它可以做更多的事情。先从最基本的开始。options.scrollbars正如我们在基本功能介绍中提到的，激活滚动条只需要做一件事情，这件事情就是：var myScroll = new IScroll('#wrapper', { scrollbars: true});

    欢马劈雪
    滚动条， iscroll-5， api， 中文版

  • 基本功能

    options.bounce当滚动器到达容器边界时他将执行一个小反弹动画。在老的或者性能低的设备上禁用反弹对实现平滑的滚动有帮助。默认值：trueoptions.click为了重写原生滚动条，iScroll禁止了一些默认的浏览器行为，比如鼠标的点击。如果你想你的应用程序响应click事件，那么该设置次属性为true。请注意，建议使用自定义的tap 事件来代替它（见下面）。

    欢马劈雪
    基本功能， iscroll-5， api， 中文版

  • 理解核心

    iScroll使用基于设备和浏览器性能的各种技术来进行滚动。通常不需要你来配置引擎，iScroll会为你选择最佳的方式。尽管如此，理解iScroll工作机制和了解如何去配置他们也是很重要的。options.useTransform默认情况下引擎会使用CSStransform属性。如果现在还是2007年，那么可以设置这个属性为false，这就是说：引擎将使用top/left属性来进行滚动。

    欢马劈雪
    理解， 核心， iscroll-5， api， 中文版

  • 配置iScroll

    在iScroll初始化阶段可以通过构造函数的第二个参数配置它。var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true});上面的例子示例了在iScroll初始化时开启鼠标滚轮支持和滚动条支持。在初始化后你可以通过options对象访问标准化值。例如：console.dir(myScroll.options);上面的语句将返回myScroll实例的配置信息。

    欢马劈雪
    配置， iscroll， iscroll-5， api， 中文版

  • 初始化

    当DOM准备完成后iScroll需要被初始化。最保险的方式是在window的onload事件中启动它。在DOMContentLoaded事件中或者inline initialization中做也可以，需要记住的是脚本需要知道滚动区域的高度和宽度。如果你有一些图片在滚动区域导致不能立马获取区域的高度和宽度，iScroll的滚动尺寸有可能会错误。为滚动起容器增加position:relative或者absolute样式。

    欢马劈雪
    初始化， iscroll-5， api， 中文版

  • 入门

    你想成为iScroll大师。行，这就是我写以下内容的目的。最好的学习iScroll的方法是看示例。在存档文件中你会发现一个叫做demo的文件夹示例。这里有大多数脚本功能的概述。IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。尽可能保持DOM结构的简洁。

    欢马劈雪
    入门， iscroll-5， api， 中文版
上一页 下一页

个人简介

  1. 欢马劈雪

  2. 纵马驰骋迎雪而行

  3. 获得 161932 积分

  4. https://nowjava.com/creator/10001

热门标签

关注时代Java

Copyright © 2014-2024NowJava. All Rights Reserved. 时代Java 版权所有 京ICP备14059627号-7

关注时代Java