islider结合react的简单实用
2017-10-12 21:56
183 查看
我用islider都是结合react来使用,主要运用在移动端,做首页轮播图,或者是手机图片预览,左右滑动
首先需要 npm install islider.js --save
让后在jsx文件头部引入一下文件
然后初始化islider
初始化之后就可以在生命周期里面调用了
详细应用参考官方文档
首先需要 npm install islider.js --save
让后在jsx文件头部引入一下文件
require('islider.js/build/iSlider.plugin.dot.js'); require('islider.js/build/iSlider.css'); let iSlider = require('islider.js/build/iSlider.js');
然后初始化islider
initISlider() { let data = [ { content: '<div class="item">相册</div>' }, { content: (function () { var dom = document.createElement('div'); dom.innerHTML = 'Element'; dom.style.cssText = 'font-size:3em;color:rgb(230, 230, 63);'; return dom; })() }, { content: '<div class="item">视频</div>' } ]; this._islider = new iSlider({ dom: this.hotList, // iSlider-wrapper data, // 显示数据 {Array} // isVertical: true, // 向上滑动 isLooping: true, // 循环播放模式 {Boolean} 默认false isAutoplay: false, // 是否自动播放 {Boolean} 默认false duration: 2000, // 停留时间, precondition: isAutoplay === true // animateType: 'rotate', animateTime: 400, // 动画过度时间 {Number} animateEasing: 'ease-in-out', // 动画过度曲线 // initIndex: 0, // 开始图片索引 plugins: [['dot', {locate: 'relative'}]] // 官方提供插件引入, [点], 文档不全 }); }
初始化之后就可以在生命周期里面调用了
componentDidMount() { this.initISlider(); } render() { return ( <div className='homePage-footer' ref={c => this.hotList = c}> </div> ); }
详细应用参考官方文档
相关文章推荐
- Android MVVM结合DataBinding的简单实用(Android studio)及自己遇到的坑
- ReactNative打包-Android(简单实用)
- reactnative appstate简单实用
- react 插件之axios简单实用
- 谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
- intellij idea和maven结合的简单实用,部署一个web项目
- MyEclipse结合GitHub简单实用教程
- java多线程结合单例模式实例,简单实用易理解
- React简单实用小知识点整理(一)
- react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条
- 分页插件简单实用,支持跟随数据量变化进行分页
- JDBC--实现用java连接oracle数据库的操作(简单实用)
- Windows系统升级超简单超实用
- React(一):React的设计哲学 - 简单之美
- JsonDataObjects 简单实用
- httpd的简单实用以及编译安装
- 简单实用的离线浏览器Web Copier
- Jqgrid简单实用
- jQuery+ROW_NUMBER结合Repeater实现简单分页
- 在centos6中安装LAMP(超级简单实用)