islider结合react的简单实用

Posted 2020-10-10 sjpqy

我用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>
        );
    }

详细应用参考官方文档