nutui icon indicating copy to clipboard operation
nutui copied to clipboard

Swipe 滑动手势左右滑动,页面也会上下滑动

Open songyanqi opened this issue 1 year ago • 2 comments

NutUI 包名

@nutui/nutui

NutUI 版本号

4.2.6

平台

weapp

重现链接

https://codesandbox.io/s/nutui4-vite-demo-forked-4rwl9v?file=/src/App.vue:4898-5506

重现步骤

    <view class="food-count-price">
      <view class="food-count">食材<text class="count">共 4 件</text></view>
      <view class="food-price">订单金额:<text class="price">¥8776.00</text></view>
    </view>
    <view class="list">
      <nut-swipe v-for="(item,index) in foodList" :key="index" :ref="setRefAction" :catchtouchmove='true'>
        <nut-cell class="content-cell">
          <template #default>
            <view class="food-name-num">
              <view class="left">
                <view class="border-l-line"></view>
                <view class="name">{{item.foodName}}</view>
                <view class="flag" v-if="item.status == 1">暂无</view>
              </view>
              <view class="right">采购数量:100kg</view>
            </view>
            <view class="food-quotation">
              <text class="price-name">单价(元)</text>
              <input class="custom-amount-input" :disabled="item.status == 1" placeholder="请输入单价" v-model="customValue" maxlength="9" :onkeyup="!/^(\d+\.?)?\d{0,2}$/.test(customValue)?(customValue=customValue.substring(0, customValue.length-1)): ''" type="digit"/>
            </view>
          </template>
        </nut-cell>
        <template #right>
          <text class="btn-warpper" ></text>
          <nut-button shape="square" class="flag-btn" style="background: #009EE8; " type="danger" @tap="markStatus(index)" v-if="item.status == 0">暂无</nut-button>
          <nut-button shape="square" class="flag-btn" style="background: #FF1A4F;" type="danger" @tap="markStatus(index)" v-else>取消</nut-button>
        </template>
      </nut-swipe>
    </view>
  </view>

期望的结果是什么?

左右滑动的时候可以锁定上下滚动

实际的结果是什么?

滑动手势左右滑动时,页面也会上下滑动,影响用户体验。

环境信息

Taro v3.6.18

(node:95284) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'sourceRoot' of undefined at Kernel.initPaths (/usr/local/lib/node_modules/@tarojs/cli/node_modules/@tarojs/service/src/Kernel.ts:90:64) at new Kernel (/usr/local/lib/node_modules/@tarojs/cli/node_modules/@tarojs/service/src/Kernel.ts:73:10) at CLI. (/usr/local/lib/node_modules/@tarojs/cli/src/cli.ts:76:22) at Generator.next () at fulfilled (/usr/local/lib/node_modules/@tarojs/cli/dist/cli.js:5:58) at processTicksAndRejections (internal/process/task_queues.js:95:5) (Use node --trace-warnings ... to show where the warning was created) (node:95284) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:95284) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

其他补充信息

No response

songyanqi avatar Jan 10 '24 06:01 songyanqi

一种可能的实现方案:在开始滑动并判定为横向时打开 catch-move,滑动停止后关闭。 感觉不是很好解决,而且 catch-move 也只在微信小程序下生效🤔

eiinu avatar Jan 10 '24 15:01 eiinu

一种可能的实现方案:在开始滑动并判定为横向时打开 catch-move,滑动停止后关闭。 感觉不是很好解决,而且 catch-move 也只在微信小程序下生效🤔 尝试了很多解决方案,还是没有什么效果

songyanqi avatar Jan 15 '24 06:01 songyanqi