search

didi / chameleon

🦎 一套代码运行多端，一端所见即多端所见
http://cml.didi.cn/
Apache License 2.0
9.02k stars 692 forks source link

scroller中嵌套carousel，会造成滑动聚焦错误的问题 #32

Open EugeneJao opened 5 years ago

EugeneJao commented 5 years ago

bug描述 scroller中嵌套carousel，会造成滑动聚焦错误的问题。

复现bug的步骤

  1. 运行代码
  2. 正常滑动
  3. 手指移动到carousel区域滑动
  4. 复现问题

问题截图

编译环境信息

运行环境信息

代码

<template>
  <page title="chameleon">
      <scroller height="{{-1}}">
        <view class="scroller-wrap">
          <demo-com title="{{title}}" image-src="{{chameleonSrc}}"></demo-com>
        </view>
        <view class="view-demo-row">
          <view class="red view">
            <text>1</text>
          </view>
          <view class="blue view">
            <text>2</text>
          </view>
          <view class="green view">
            <text>3</text>
          </view>
        </view>
        <view>
          <button>
            <text>asda</text>
          </button>
        </view>
        <list>
          <cell>
            <text>1</text>
          </cell>
          <cell>
            <text>2</text>
          </cell>
          <cell>
            <text>3</text>
          </cell>
        </list>
        <view>
          <container direction="column">
            <head>
              <view>
                <text>header</text>
              </view>
            </head>
            <container direction="row" style="flex:1;">
              <aside>
                <view>
                  <text>aside</text>
                </view>
              </aside>
              <container direction="column" style="flex:1">
                <main style="flex:1;">
                  <view>
                    <text>main</text>
                  </view>
                </main>
                <foot>
                  <view>
                    <text>foot</text>
                  </view>
                </foot>
              </container>
            </container>
          </container>
        </view>

        <view>
          <carousel class="container" indicator-dots="{{true}}"  current="{{1}}" circular="{{true}}">
            <carousel-item>
              <view class="carousel-item" style="background-color: #EBDEAA"></view>
            </carousel-item>
            <carousel-item>
              <view class="carousel-item" style="background-color: #E3EDCD"></view>
            </carousel-item>
            <carousel-item>
              <view class="carousel-item" style="background-color: #EAEAEF"></view>
            </carousel-item>
          </carousel>
        </view>
        <view>
          <view>
            <input placeholder="请输入你的用户名"></input>
          </view>
          <view>
            <textarea placeholder="focus聚焦"></textarea>
          </view>
          <view>
            <switch
            label="Switch"
            ></switch>
          </view>
        </view>
      </scroller>
  </page>
</template>

<script>

class Index  {
  data = {
    title: "chameleon",
    chameleonSrc: require('../../assets/images/chameleon.png')
  }
}

export default new Index();

</script>
<style >
.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.scroller-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.view-demo-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.view-demo-row > .view {
  flex: 1;
}

.carousel-item {
  height: 300cpx;
  width: 750cpx;
}

</style>
<script cml-type="json">
{
  "base": {
    "usingComponents": {
      "demo-com": "/components/demo-com/demo-com"
    }
  },
  "wx": {
    "navigationBarTitleText": "index",
    "backgroundTextStyle": "dark",
    "backgroundColor": "#E2E2E2"
  }
}
</script>
beatles-chameleon commented 5 years ago

考虑到滚动效果的稳定，轮播图组件触发滚动后，默认是阻止touchmove事件冒泡的，后续会支持可配置touchmove事件冒泡~

EugeneJao commented 5 years ago

额，问题还没解决就关闭不太好吧

shenmissing commented 5 years ago

请问问题解决了吗 滑动carousel 时 页面会一起触发滚动