4000 reactjs 中运用swiper 插件时 点击事件失效问题
2017-07-17 09:57
369 查看
在reactjs 中运用swiper 相关的插件(包括swiper.js,react-swiper,以及react-id-swiper)会出现点击事件失效的问题,那么问题出现在哪里呢?
先上正常的逻辑代码
正常情况下会这样写,而且页面的渲染,以及点击貌似没有问题,但是当我们在第一屏反向滑动时候点击发现页面跳转的逻辑没有执行?这是为什么呢?
经过仔细查看发现 原来swiper的原理是 n+1 或者是n+2 .............
那么也就是在某一轮播的item上是没有onclick 事件的,因此解决方案也就出现了,看下面的代码
componentDidUpdate(newProps, newState) {
var bannerItems = document.getElementsByClassName('swiper-slide'),
_this = this;
for (var i = 0, length = bannerItems.length; i < length; i++) {
bannerItems[i].onclick = function(e) {
e.stopPropagation();
e.preventDefault();
var bannerObj = JSON.parse(e.target.dataset.item) || {};
_this.linkTo(bannerObj);
}
}
}
先上正常的逻辑代码
return ( <Swiper {...params} > {that.props.bannerData.map((item,index) => { return ( <img src={item.imgurl} onClick={e=>this.clickFunc(e} key={index}/> ) })} </Swiper> )
正常情况下会这样写,而且页面的渲染,以及点击貌似没有问题,但是当我们在第一屏反向滑动时候点击发现页面跳转的逻辑没有执行?这是为什么呢?
经过仔细查看发现 原来swiper的原理是 n+1 或者是n+2 .............
那么也就是在某一轮播的item上是没有onclick 事件的,因此解决方案也就出现了,看下面的代码
componentDidUpdate(newProps, newState) {
var bannerItems = document.getElementsByClassName('swiper-slide'),
_this = this;
for (var i = 0, length = bannerItems.length; i < length; i++) {
bannerItems[i].onclick = function(e) {
e.stopPropagation();
e.preventDefault();
var bannerObj = JSON.parse(e.target.dataset.item) || {};
_this.linkTo(bannerObj);
}
}
}
return ( <Swiper {...params} > {that.props.bannerData.map((item,index) => { return ( <img src={item.imgurl} data-item={JSON.stringify(item)} key={index}/> ) })} </Swiper> )当我们在组建更新的生命周期里做这样的处理时候问题就可以解决了,现在无论你怎样滑动都没有问题了
相关文章推荐
- 今天使用PullToRefreshListView时遇到Item点击事件失效问题,特此记下解决办法
- Android ListView item 点击事件失效问题的解决
- 关于ListView的点击事件失效的问题
- Android的动画移动后点击事件失效问题
- 解决Listview中Item中控件设置点击事件而Item点击事件失效问题
- SlidingMenu+ViewPage+ListView嵌套(类似网易 ) ListView点击事件失效冲突问题解决
- jQuery模拟鼠标点击事件失效的问题
- Listview点击事件失效问题解决以及每个Item 子控件获取focus
- ListView条目中有CheckBox点击事件失效问题
- 关于RecyclerView列表点击事件ripple效果失效的问题
- Listview和GrideView嵌套使用时出现的点击事件失效的问题
- 关于easyui插件使用过程中,onkeyup等事件失效问题
- 解决ScrollView中嵌套ListView滚动效果冲突问题 & ListVIew点击事件失效
- ListView的item中有button ImageButton CheckBox EditText等时 点击事件失效问题的解决
- ListView item中有button或EditText时 点击事件失效问题的解决
- ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法
- 解决ListVeiw点击事件失效问题
- 解决vue 绑定对象内点击事件失效问题
- ListView item点击事件失效问题
- android用webview加载H5页面出现点击事件失效的问题解决