Skip to content

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

Open
@songyanqi

Description

@songyanqi

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    PR Welcome已确认存在的问题,或者计划实现的功能,欢迎社区 PRimprovement一些可以优化的地方upstream需要上游修复的,例如 Taro、各小程序平台等

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions