Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(popup): 增加禁止 page 滚动的例子 #2803

Closed
wants to merge 2 commits into from
Closed

fix(popup): 增加禁止 page 滚动的例子 #2803

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62090c3
fix(popup): 增加禁止 page 滚动的例子
oasis-cloud Nov 27, 2024
fe3b54c
fix(popup): 忽略 wx
oasis-cloud Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion src/packages/popup/demos/taro/demo8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,19 @@
setScrollPenetration(true)
}}
/>
<Popup visible={scrollPenetration} position="bottom" lockScroll>
<Popup
visible={scrollPenetration}
position="bottom"
lockScroll
onOpen={() => {
// @ts-ignore
Taro.getEnv().toLowerCase() === 'weapp' &&
Comment on lines +21 to +22
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

需要添加微信小程序的类型定义

建议不要使用 @ts-ignore 来绕过类型检查。相反，应该正确引入微信小程序的类型定义。

建议添加以下类型定义：

+import { getEnv } from '@tarojs/taro'
+import { wx } from '@tarojs/taro/types/wx/index'

然后移除 @ts-ignore 注释并使用导入的类型：

-        // @ts-ignore
-        Taro.getEnv().toLowerCase() === 'weapp' &&
+        getEnv().toLowerCase() === 'weapp' &&

Committable suggestion skipped: line range outside the PR's diff.

wx.setPageStyle({

Check failure on line 23 in src/packages/popup/demos/taro/demo8.tsx

View workflow job for this annotation

GitHub Actions / build 

Cannot find name 'wx'.
complete: console.log,
style: { overflow: 'hidden' },
})
Comment on lines +24 to +27
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

优化错误处理和清理逻辑

当前实现存在以下问题：

  1. 没有处理 setPageStyle 可能的失败情况
  2. 在弹窗关闭时没有恢复页面样式
  3. 在生产环境中使用了 console.log

建议按照以下方式优化实现：

 <Popup
   visible={scrollPenetration}
   position="bottom"
   lockScroll
   onOpen={() => {
-    Taro.getEnv().toLowerCase() === 'weapp' &&
-      wx.setPageStyle({
-        complete: console.log,
-        style: { overflow: 'hidden' },
-      })
+    if (getEnv().toLowerCase() === 'weapp') {
+      wx.setPageStyle({
+        style: { overflow: 'hidden' },
+        success: () => {
+          console.debug('页面样式设置成功')
+        },
+        fail: (error) => {
+          console.error('设置页面样式失败:', error)
+        }
+      })
+    }
   }}
+  onClose={() => {
+    if (getEnv().toLowerCase() === 'weapp') {
+      wx.setPageStyle({
+        style: { overflow: 'visible' },
+        fail: (error) => {
+          console.error('恢复页面样式失败:', error)
+        }
+      })
+    }
+  }}
 >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
wx.setPageStyle({
complete: console.log,
style: { overflow: 'hidden' },
})
<Popup
visible={scrollPenetration}
position="bottom"
lockScroll
onOpen={() => {
if (getEnv().toLowerCase() === 'weapp') {
wx.setPageStyle({
style: { overflow: 'hidden' },
success: () => {
console.debug('页面样式设置成功')
},
fail: (error) => {
console.error('设置页面样式失败:', error)
}
})
}
}}
onClose={() => {
if (getEnv().toLowerCase() === 'weapp') {
wx.setPageStyle({
style: { overflow: 'visible' },
fail: (error) => {
console.error('恢复页面样式失败:', error)
}
})
}
}}
>
🧰 Tools
🪛 GitHub Check: build

[failure] 23-23:
Cannot find name 'wx'.

}}
>
<ScrollView scrollY style={{ height: '200px' }}>
{Array.from({ length: 200 })
.fill('')
Expand Down
2 changes: 2 additions & 0 deletions src/packages/popup/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,8 @@ import { Popup } from '@nutui/nutui-react-taro'

如果需要内容支持溢出滚动，则需要包裹一层 ScrollView 组件。

如果 page 可以滚动，可以在 popup 的 onOpen 中通过环境判断来动态设置 page 标签的样式。

:::demo

<CodeBlock src='taro/demo8.tsx'></CodeBlock>
Expand Down
Loading