swiper的相关用法

佚名 7年前 (2019-05-09) 随笔 1517人围观抢沙发百度已收录
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { pages } from 'landing-sdk'
import * as utils from '../utils'
import * as actions from '../actions'
import _ from 'lodash'
import classnames from 'classnames'
import styles from './landing.scss'
import Swiper from '../components/swiper/swiper.min.js';

class PageLanding extends Component {

  constructor(props) {
    super(props)
    this.state = {
      headHeight: 60,
      num: [],
      activeIndex: 0
    }
  }
componentDidMount(){
    if(this.swiper){
    this.swiper.destory()
this.swiper = null
}

    let that = this
    this.swiper = new Swiper(this.swiperID, {
      watchSlidesProgress: true,
      slidesPerView: $(window).width() > 768 ? 'auto' : 1,
      centeredSlides: true,
      loop: true,
      loopedSlides: 5,
      slideToClickedSlide: true,
      autoplay: true,
      // watchSlidesVisibility: true,
      // watchOverflow: true,
      // roundLengths: true,
      // grabCursor: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      on: {
        progress: function (progress) {

          for (let i = 0; i < this.slides.length; i++) {
            let slide = this.slides.eq(i);
            let slideProgress = this.slides[i].progress;
            let modify = 1, translate, scale;
            if (Math.abs(slideProgress) > 2) {
              modify = (Math.abs(slideProgress) - 1) * (0.06) + 1;
            };
            if (Math.abs(slideProgress) === 2) {
              modify = (Math.abs(slideProgress) - 1) * (0.04) + 1;
            };
            if (Math.abs(slideProgress) === 1) {
              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            if (utils.isPhone() || utils.isAndroid() || utils.isiPhone()) {
              translate = slideProgress * modify + 'px';
              scale = 1;
            } else {
              translate = slideProgress * modify * (utils.isiPad() ? 310 : 470) + 'px';
              scale = (utils.isiPhone() ? 1 : 1 - Math.abs(slideProgress) / 8);
            }

            let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform('translateX(' + translate + ') scale(' + scale + ')');
            slide.css('zIndex', zIndex);
            slide.css('opacity', 1);
            if (Math.abs(slideProgress) > 3) {
              slide.css('opacity', 0);
            }
          }
        },
        setTransition: function (transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i)
            slide.transition(transition);
          }
        },
        click: function (e) {
          that.setState({
            activeIndex: this.realIndex
          })
        },
      }
    })
}
render(){
return (
<pages.landing
{...this.props}
{...this.state}
ref={(ref)=>{this.page = ref}}
renderPageContent = {this.renderPageContent}
>
</pages.landing>
)
}
launchToDetail = (target) =>{
    const {history} = this.props
    history.push(`/article/${target._id}`)
}
 launchToArticle = (target, index) => {
    const { history } = this.props;
    history.push(`/article/${target._id}`)
  }
  widthUpdate = () => {
    var width = $(window).width();
    if (width > 768) {
      if (this.state.headHeight !== 60) {
        this.setState({ headHeight: 60 })
      }
    } else {
      if (this.state.headHeight !== 50) {
        this.setState({ headHeight: 50 })
      }
    }
  }
  renderPageContent = (context) => {
    let modules = context.module.config.general.navigators;
    let slide_img = context.module.config.general.ui.images;
    const { topic, topicBanner } = this.props;
    let { num } = this.state;


    return (
      <div className={classnames(styles.main, (utils.isiPad()) && window.orbitBridge && styles.fixedPosition, utils.isiPhone() && window.orbitBridge && utils.isiPhoneX() && styles.fixedPosition0)}>
        <style dangerouslySetInnerHTML={{
          __html: `
        .swiper-container {
          margin: 0 auto;
          position: relative;
          overflow: hidden;
          list-style: none;
          padding: 0;
          z-index: 1;
        }
        .swiper-wrapper {
          position: relative;
          width: 100%;
          height: 100%;
          z-index: 1;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-transition-property: -webkit-transform;
          transition-property: -webkit-transform;
          -o-transition-property: transform;
          transition-property: transform;
          transition-property: transform, -webkit-transform;
          -webkit-box-sizing: content-box;
          box-sizing: content-box;
        }
        .swiper-wrapper {
          -webkit-transform: translate3d(0px, 0, 0);
          transform: translate3d(0px, 0, 0);
        }
        .swiper-slide {
          -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          width: 100%;
          position: relative;
          -webkit-transition-property: -webkit-transform;
          transition-property: -webkit-transform;
          -o-transition-property: transform;
          transition-property: transform;
          transition-property: transform, -webkit-transform;
        }
        .swiper-button-prev,
        .swiper-button-next {
          position: absolute;
          top: 50%;
          width: 27px;
          height: 44px;
          margin-top: -22px;
          z-index: 10;
          cursor: pointer;
          background-size: 27px 44px;
          background-position: center;
          background-repeat: no-repeat;
        }

        .swiper-button-prev.swiper-button-disabled,
        .swiper-button-next.swiper-button-disabled {
          opacity: 0;
          cursor: auto;
          pointer-events: none;
        }
        .swiper-pagination-bullets {
          left: 0;
          width: 100%;
      }
      
      .swiper-pagination {
          text-align: center;
          -webkit-transition: opacity .3s;
          -o-transition: .3s opacity;
          transition: opacity .3s;
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          z-index: 10;
      }
      .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin-left: 6px;
        display: inline-block;
        border-radius: 100%;
        background-color: rgb(43, 83, 98);
        opacity: 0.5;
    }
      .swiper-pagination-bullet-active {
        opacity: 1;
        background-color: rgb(0, 117, 194);
    }
    
    
      `}} />
        <div className={classnames(styles.center, styles.certify)}>
          <div className={classnames('swiper-container', styles.swiper, utils.isPhone() && styles.isPhone, utils.isiPhone() && styles.isiPhone, utils.isiPad() && styles.isiPad)}
            ref={(ref) => this.swiperID = ref}>
            <div className={classnames('swiper-wrapper', styles.swrapper)}>
              {
                slide_img &&
                slide_img.map((img, index) => {
                  return (
                    <div key={index}
                      className={classnames('swiper-slide', styles.sslide_img, utils.isiPad() && styles.isiPad)}
                      style={{ 'backgroundImage': `url(${img})` }}
                    // onClick={() => this.launchToArticle(img.id)}
                    >
                    </div>
                  )
                })
              }
            </div>
            <div className={'swiper-button-prev'}></div>
            <div className={'swiper-button-next'}></div>
            <div className={classnames('swiper-pagination', styles.pagination, utils.isPhone() && styles.isPhone, utils.isiPhone() && styles.isiPhone, utils.isiPad() && styles.isiPad)}></div>
          </div>

          <div className={classnames(modules && styles.itemwrap, utils.isPhone() && styles.isPhone, utils.isiPhone() && styles.isiPhone, utils.isiPad() && styles.isiPad)}>
            {
              modules && modules.map((i, index) => {
                return (

                  <div key={index}
                    className={classnames(styles.item, styles.float, utils.isPhone() && styles.isPhone)}
                    onMouseEnter={(utils.isiPad() || utils.isPhone()) ? () => { } : () => this.toggleHoverEnter(modules.length, index)}
                    onMouseLeave={(utils.isiPad() || utils.isPhone()) ? () => { } : () => this.toggleHoverLeave(modules.length, index)}
                  // className={classnames(styles.itemTitle, this.state.num && this.state.num[index] == 1 ? styles.hoverStyle : styles.itemWidth)}
                  >
                    <Link to={i.link}>
                      <div className={classnames(styles.inner, this.state.num && this.state.num[index] == 1 ? styles.hoverStyle : '')} >
                        <img className={styles.icon} src={i.image} />
                      </div>
                      <div className={classnames(styles.titlenew)}>{i.title}</div>
                    </Link>
                  </div>
                );
              })
            }
          </div>
        </div>
      </div>
    )
  }

}
export default PageLanding;