upp

Code/public/myData/myData.js

@@ -12,7 +12,7 @@ const baseUrlAtl = 'xxxxxxxxxxxxxxxxx/staticData/'
 const myDataTemp = {
   // 开发调试为 false  正式上线为  true
   // 开发调试的时候 取消所有加载进度条 所有的视频动画都加上跳过按钮
-  isLdong: true,
+  isLdong: false,
 
   // 首页(静态资源目录位置：staticData/home)
   home: {

Code/src/pages/B1more/S3goods/index.module.scss

@@ -21,7 +21,7 @@
           background-size: 100% 100%;
           color: #3d2726;
           font-size: 16px;
-          transition: color 0.3s;
+          transition: color 0.5s;
           padding-top: 84px;
           & > div {
             text-align: center;
@@ -61,6 +61,7 @@
             line-height: 38px;
             position: relative;
             .S3zRimg {
+              pointer-events: none;
               position: absolute;
               right: 0;
               bottom: 15px;

Code/src/pages/B1more/S3goods/index.tsx

@@ -52,6 +52,10 @@ function S3goods({ hidden }: Props) {
     return arr
   }, [])
 
+  // 鼠标拖动防止误碰
+  const pageXRef = useRef(0)
+  const clickFlag = useRef(true)
+
   // 滚轮和拖动
   const [isFlag, setIsFlag] = useState(false)
 
@@ -64,13 +68,17 @@ function S3goods({ hidden }: Props) {
           const nowMove = sroolRef.current.scrollLeft
 
           // 滚轮
-          let num = 50
+          let num = 30
           if (ev.deltaY < 0) num = -num
           sroolRef.current.scrollLeft = nowMove + num
         } else if (isFlag) {
           const nowMove = sroolRef.current.scrollLeft
 
-          // 鼠标按住移动
+          // 鼠标按住移动距离超过5 禁止点击事件
+          if (pageXRef.current - ev.pageX >= 5 || pageXRef.current - ev.pageX <= -5) {
+            clickFlag.current = false
+          }
+
           sroolRef.current.scrollLeft = nowMove - ev.movementX
         }
       }
@@ -83,6 +91,17 @@ function S3goods({ hidden }: Props) {
     return `${baseURL}more/txtBg/ban${num + 1}.jpg`
   }, [])
 
+  // 鼠标抬起
+  let pageTime = useRef(-1)
+
+  const onMouseUpFu = useCallback(() => {
+    setIsFlag(false)
+    clearTimeout(pageTime.current)
+    pageTime.current = window.setTimeout(() => {
+      clickFlag.current = true
+    }, 200)
+  }, [])
+
   // 打开详情
   const [openInfo, setOpenInfo] = useState({} as GoodsType)
 
@@ -108,15 +127,20 @@ function S3goods({ hidden }: Props) {
               className='S3rowZhan'
               style={{ cursor: isFlag ? 'move' : 'pointer' }}
               ref={key === item1.name ? sroolRef : null}
-              onMouseDown={() => setIsFlag(true)}
-              onMouseUp={() => setIsFlag(false)}
+              onMouseDown={e => {
+                pageXRef.current = e.pageX
+                setIsFlag(true)
+              }}
+              onMouseUp={onMouseUpFu}
               onMouseLeave={() => setIsFlag(false)}
               onMouseMove={e => mousemoveFu(e)}
               onWheel={e => mousemoveFu(e, true)}
             >
               {item1.info.map((item2, index2) => (
                 <div
-                  onClick={() => setOpenInfo(item2)}
+                  onClick={() => {
+                    if (clickFlag.current) setOpenInfo(item2)
+                  }}
                   className='S3zRow sizeNo'
                   key={index2}
                   style={{ backgroundImage: `url(${row2Bac(index2)})` }}