zoukankan      html  css  js  c++  java
  • 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>
            );
        }

    详细应用参考官方文档

  • 相关阅读:
    jQuery入门教程
    vue-lazyload 图片不更新
    Eggjs 设置跨域请求
    Vue.js错误: Maximum call stack size exceeded
    ubuntu nginx ssl 证书配置
    ubuntu 安装nginx, 出现 Unable to locate package
    nginx 判断移动端或者PC端 进入不同域名
    node.js 生成二维码
    Linux 配置ssh 免密码登录
    nodejs 从部署到域名访问
  • 原文地址:https://www.cnblogs.com/shenjp/p/7658407.html
Copyright © 2011-2022 走看看