jd-opensource / jd-opensource/taro-ui

生成h5, tabs和swiper会冲突

Open
#414 3 comments 0 reactions 0 assignees View on GitHub
stale
Dominant language
TypeScript
Stars
4.7k
Forks
740
PR merge metrics
No merged PRs in 30d

Description

**问题描述**
生成h5, tabs和swiper会冲突,之前有一个版本没有冲突

**复现步骤**
滑动swiper会触发tabs的滑动,之前有一个版本没有这个问题(1.5.0版本),
```js
// 这是引用封装的tabs组件
render () {
const tabList = [
{
title: '推荐',
type: 'recommend'
},
{
title: '关注',
type: 'follow'
}
]
const swiperData = [
{
image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548925629175&di=c33bde39b436da86b96d6aa7a12746e9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201411%2F01%2F20141101093413_FSdSX.jpeg'
},
{
image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548925629175&di=c33bde39b436da86b96d6aa7a12746e9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201411%2F01%2F20141101093413_FSdSX.jpeg'
}
]
const gridData = [
{
image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
value: '领取中心'
},
{
image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
value: '找折扣'
},
{
image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
value: '领会员'
},
{
image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
value: '新品首发'
},
{
image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
value: '领京豆'
},
{
image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
value: '手机馆'
}
]
const myCardData = [
{
type: 1,
imgShow: 'https://qny.smzdm.com/201902/13/5c63ce1e350f35926.jpg_d200.jpg',
title: '也许这刻你仍然尚未发觉,家中有这一个访客,时时漏夜冒昧探你,将琐碎东西带走,然后又放低',
cardTitle: '干破苍穹'
},
{
type: 3,
imgShow: 'https://qny.smzdm.com/201902/13/5c63ce1e350f35926.jpg_d200.jpg',
title: '也许这刻你仍然尚未发觉,家中有这一个访客,时时漏夜冒昧探你,将琐碎东西带走,然后又放低',
cardTitle: '干破苍穹'
},
{
type: 2,
imgShow: 'https://qny.smzdm.com/201902/13/5c63ce1e350f35926.jpg_d200.jpg',
title: '也许这刻你仍然尚未发觉,家中有这一个访客,时时漏夜冒昧探你,将琐碎东西带走,然后又放低',
cardTitle: '干破苍穹'
},
{
type: 1,
imgShow: 'https://qny.smzdm.com/201902/13/5c63ce1e350f35926.jpg_d200.jpg',
title: '也许这刻你仍然尚未发觉,家中有这一个访客,时时漏夜冒昧探你,将琐碎东西带走,然后又放低',
cardTitle: '干破苍穹'
}
]
return (










)
}
```

```js
// 这是tabA组件

render () {
return (



{
this.props.myCardData.map(
(item, i) => {
return (

)
}
)
}

)
}
```

```js
// 这是swiper组件

render () {
const swiperData = this.props.swiperData
return (

{
swiperData.map(
(item, i) => {
return (



)
}
)
}

)
}
```

```js
// 这是tabs组件

render () {
const tabList = this.props.tabList
return (


{ this.props.children }


)
}
```

**期望行为**
滑动swiper不会触发滑动tabs

**报错信息**

**系统信息**
![image](https://user-images.githubusercontent.com/33446705/53166952-972a8180-3611-11e9-84f4-f1c1c19f2198.png)

**补充信息**
错误原因:应该是事件冒泡

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.