码迷,mamicode.com
首页 > 其他好文 > 详细

islider结合react的简单实用

时间:2017-10-12 22:54:39      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:模式   element   isa   cond   auto   data   插件   时间   ase   

我用islider都是结合react来使用,主要运用在移动端,做首页轮播图,或者是手机图片预览,左右滑动

首先需要 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>
        );
    }

详细应用参考官方文档

islider结合react的简单实用

标签:模式   element   isa   cond   auto   data   插件   时间   ase   

原文地址:http://www.cnblogs.com/shenjp/p/7658407.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!