Swiper中文论坛

标题: Swiper4.0在React中回调函数没有触发。 [打印本页]
作者: caoyan    时间: 2017-12-19 20:27
标题: Swiper4.0在React中回调函数没有触发。
如题，本人现在使用react开发项目，用到了swiper，轮播图可以正常使用，但是回到函数却一个没有触发？还是本人写法有问题，求大佬指教
componentDidMount() {
    var ele = this.refs.swiperContainer;
    var mySwiper = new Swiper(ele, {
      speed: 4000,
      spaceBetween: 0,
       // initialSlide: this.state.slideIndex,
      onKeyPress: function(swiper, event){
        alert('你按了键盘'+event);
        },
      onTap: function(swiper){
        alert('你tap了Swiper');
      },
      onClick:function(){
        console.log(123);
      },
      onInit: function(swiper) {
        alert();
        console.log(swiper.activeIndex); //提示Swiper的当前索引
      },
      onSlideChangeEnd: function(swiper) {
        alert();
        console.log(swiper.activeIndex); //切换结束时，告诉我现在是第几个slide
      }

    });


作者: chenghai    时间: 2017-12-23 09:46
kanxia shi ge shnme
作者: 菜鸟求助    时间: 2018-1-2 17:05
楼主解决了吗
作者: mujimz    时间: 2018-3-22 19:17
楼主 react中怎么引用swiper啊，我引用时就报错啊
作者: 三大框架都会码    时间: 2018-4-10 19:46
我就想知道你怎么build的
作者: phin    时间: 2018-4-12 10:04
  1. import 'whatwg-fetch'
  2. import BannerLess from '../../css/banner.less'
  3. import SwiperLess from '../../css/swiper.less'
  4. import React from 'react'
  5. import Swiper from 'swiper'

  7. export default class Banner extends React.Component {
  8.   constructor() {
  9.     super()
  10.   }

  12.   componentDidMount(){
  13.     var ele = this.refs.swiperContainer
  14.     var mySwiper = new Swiper(ele, {
  15.       direction:'horizontal',
  16.       navigation: {
  17.         nextEl: '.swiper-button-next',
  18.         prevEl: '.swiper-button-prev'
  19.       }
  20.     })
  21.   }

  23.   render() {
  24.     return (
  25.       <div className='banner'>
  26.         <div className='swiper-container' ref='swiperContainer'>
  27.           <div className='swiper-wrapper'>
  28.             <div className='swiper-slide'>Slide 1</div>
  29.             <div className='swiper-slide'>Slide 2</div>
  30.             <div className='swiper-slide'>Slide 3</div>
  31.           </div>
  32.           <div className='swiper-button-prev' />
  33.           <div className='swiper-button-next' />
  34.         </div>
  35.       </div>
  36.     )
  37.   }
  38. }
复制代码
作者: SipkeTang    时间: 2018-4-16 19:22
楼主解决了么
作者: yijiang311    时间: 2018-4-18 14:33
我想知道大家都build不起来吗一样报swiper.esm.bundle.js:56
这个错吗



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2