fix: 修复 imageGallery 开启 showToolbar 功能后导致页面不可滚动的问题 (#6108)

examples/components/Form/Static.jsx

@@ -134,6 +134,7 @@ export default {
           title: '233',
           imageCaption: 'jfe fjkda fejfkda fejk fdajf dajfe jfkda',
           enlargeAble: true,
+          showToolbar: true,
           originalSrc: '${image}'
         },
 
@@ -144,6 +145,7 @@ export default {
           thumbMode: 'cover',
           thumbRatio: '4:3',
           enlargeAble: true,
+          showToolbar: true,
           originalSrc: '${src}' // 注意这个取变量是想对数组成员取的。
         },
 

packages/amis-ui/src/components/ImageGallery.tsx

@@ -90,16 +90,21 @@ export class ImageGallery extends React.Component<
     actions: ImageGallery.defaultProps.actions
   };
 
-  componentDidMount() {
-    window.addEventListener('wheel', this.onWheelScroll.bind(this), {
-      passive: false
-    });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('wheel', this.onWheelScroll);
+  galleryMain?: HTMLDivElement;
+  @autobind
+  galleryMainRef(ref: HTMLDivElement) {
+    if (ref) {
+      ref.addEventListener('wheel', this.onWheelScroll, {
+        passive: false
+      });
+    } else {
+      this.galleryMain?.removeEventListener('wheel', this.onWheelScroll);
+    }
+
+    this.galleryMain = ref;
   }
 
+  @autobind
   onWheelScroll(event: WheelEvent) {
     const showToolbar = this.state?.showToolbar;
 
@@ -290,7 +295,10 @@ export class ImageGallery extends React.Component<
               <div className={cx('ImageGallery-title')}>
                 {items[index].title}
               </div>
-              <div className={cx('ImageGallery-main')}>
+              <div
+                className={cx('ImageGallery-main')}
+                ref={this.galleryMainRef}
+              >
                 <img
                   src={items[index].originalSrc}
                   style={{transform: `scale(${scale}) rotate(${rotate}deg)`}}