jdf2e / nutui

京东风格的移动端 Vue 组件库,支持多端小程序(A Vue.js UI Toolkit for Mobile Web)
https://nutui.jd.com
MIT License
6.01k stars 814 forks source link

vue3编译微信小程序,dialog内容无法滚动 #3041

Closed Swarz closed 1 month ago

Swarz commented 2 months ago

NutUI 包名

@nutui/nutui-taro

NutUI 版本号

4.3.0

平台

weapp

重现链接

https://gitee.com/Swarz/examples/tree/master/taro-nut-dialog

重现步骤

  1. 下载后打开taro-nut-dialog文件夹,安装依赖 运行dev:weapp
  2. 首页点击按钮,出现dialog,dialog内容有滚动条。
  3. 鼠标滚轮可以滚动,滑动屏幕内容不能滚动,手机预览也不行。

也可以官方示例pages/index 直接做修改:

<template>
  <view class="demo">
    <nut-dialog title="温馨提示" v-model:visible="visible5" >
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
      <view> 欢迎使用 NutUI 开发 Taro 多端项目 <Dongdong /> </view>
    </nut-dialog>
    <view>{{ count }}</view>
    <view>
      <nut-button type="primary" @click="handleClick"> 弹框 </nut-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { Dongdong } from '@nutui/icons-vue-taro'
const visible5 = ref(false)
const count = ref(0)

const handleClick = () => {
  visible5.value = true
}
</script>

<style>

期望的结果是什么?

可以滑动

实际的结果是什么?

不可以

环境信息

👽 Taro v3.6.26

Taro CLI 3.6.26 environment info: System: OS: Windows 11 10.0.22621 Binaries: Node: 18.17.0 - C:\Program Files\nodejs\node.EXE npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD npmPackages: @tarojs/cli: 3.6.26 => 3.6.26 @tarojs/components: 3.6.26 => 3.6.26 @tarojs/helper: 3.6.26 => 3.6.26 @tarojs/plugin-framework-vue3: 3.6.26 => 3.6.26 @tarojs/plugin-html: 3.6.26 => 3.6.26 @tarojs/plugin-platform-alipay: 3.6.26 => 3.6.26 @tarojs/plugin-platform-h5: 3.6.26 => 3.6.26 @tarojs/plugin-platform-jd: 3.6.26 => 3.6.26 @tarojs/plugin-platform-qq: 3.6.26 => 3.6.26 @tarojs/plugin-platform-swan: 3.6.26 => 3.6.26 @tarojs/plugin-platform-tt: 3.6.26 => 3.6.26 @tarojs/plugin-platform-weapp: 3.6.26 => 3.6.26 @tarojs/runtime: 3.6.26 => 3.6.26 @tarojs/shared: 3.6.26 => 3.6.26 @tarojs/taro: 3.6.26 => 3.6.26 @tarojs/taro-loader: 3.6.26 => 3.6.26 @tarojs/webpack5-runner: 3.6.26 => 3.6.26 babel-preset-taro: 3.6.26 => 3.6.26 eslint-config-taro: 3.6.26 => 3.6.26

其他补充信息

No response

eiinu commented 1 month ago

默认情况下 lock-scroll 为 true,会开启背景锁定和 catch-move,此时内容的滑动会被拦截。 需要增加一层 scroll-view 实现滚动。