islider结合react的简单实用

Posted sjpqy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了islider结合react的简单实用相关的知识,希望对你有一定的参考价值。

我用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的简单实用的主要内容,如果未能解决你的问题,请参考以下文章

Android 实用代码片段

Android 实用代码片段

30 段 Python 实用代码

asp.net页面实用代码片段

超实用的php代码片段

实用代码片段