fix: barrage 小程序不展示问题处理 (#1987)

.gitignore

@@ -16,7 +16,7 @@ src/packages/vscode-extension/*.vsix
 src/packages/vscode-extension/yarn.lock
 /.nyc_output
 /coverage
-/tsc/test
+/tsc
 /site_docs
 /src/sites/mobile-taro/vue/src/app.config.ts
 

package.json

@@ -82,8 +82,8 @@
   "devDependencies": {
     "@commitlint/cli": "^10.0.0",
     "@commitlint/config-conventional": "^10.0.0",
-    "@tarojs/taro": "3.5.6",
     "@tarojs/components": "3.5.6",
+    "@tarojs/taro": "3.5.6",
     "@types/jest": "^26.0.22",
     "@types/node": "^17.0.16",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
@@ -102,7 +102,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.8.0",
     "eslint-visitor-keys": "2",
-    "fs-extra": "^9.1.0",
+    "fs-extra": "^11.1.0",
     "highlight.js": "^10.3.1",
     "husky": "^6.0.0",
     "inquirer": "^8.2.0",

src/packages/__VUE/barrage/index.scss

@@ -1,12 +1,12 @@
 .nut-barrage {
   position: absolute;
-  left: 0;
+  right: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: #f7f8fa;
+  --move-distance: '300%';
   .dmitem {
     width: 100px;
     // max-width: 150px;
@@ -26,6 +26,22 @@
       animation-timing-function: linear;
       animation-play-state: running;
     }
+    @keyframes moving {
+      from {
+        transform: translateX(100%);
+      }
+      to {
+        transform: translateX(var(--move-distance));
+      }
+    }
+    @-webkit-keyframes moving {
+      from {
+        -webkit-transform: translateX(100%);
+      }
+      to {
+        transform: translateX(var(--move-distance));
+      }
+    }
   }
 }
 .nut-theme-dark {
@@ -35,22 +51,3 @@
     }
   }
 }
-
-// @keyframes moving {
-//   from {
-//     transform: translateX(100%);
-//   }
-//   to {
-//     transform: translateX(-150%);
-//     // transform: translateX(-180%);
-//     // transform: translateX(var(--move-distance));
-//   }
-// }
-// @-webkit-keyframes moving {
-//   from {
-//     -webkit-transform: translateX(100%);
-//   }
-//   to {
-//     transform: translateX(-150%);
-//   }
-// }

src/packages/__VUE/barrage/index.taro.vue

@@ -54,7 +54,7 @@ export default create({
     },
     speeds: {
       type: Number,
-      default: 800
+      default: 2000
     },
     rows: {
       type: Number,
@@ -94,8 +94,6 @@ export default create({
     onMounted(() => {
       if (slotDefault) {
         const list = document.getElementsByClassName('slotBody' + classTime)[0].getElementsByClassName('dmitem');
-        console.log(list);
-
         let childrens = list?.[0]?.children || [];
         danmuList.value = childrens;
       }
@@ -141,38 +139,17 @@ export default create({
 
     const runStep = () => {
       danmuList.value.forEach((item: any, index: number) => {
-        // let el = danmuList.value[index];
-        if (typeof danmuList.value[index] == 'object') {
-          // danmuListSlots.value.push(item);
-          // let l = slotDefault ? String(danmuList.value.length) : '';
-          // let s = l + danmuListSlots.value.indexOf(item);
-          getNode(index);
-        } else {
-          // if (el?.classList.contains('dmitem')) {
-          //   el.classList.remove('dmitem');
-          // }
-          // if (el?.classList.contains('dmitem' + index)) {
-          //   el.classList.remove('dmitem' + index);
-          // }
-          // if (slotDefault && el) {
-          //   if (el?.classList.contains('move')) {
-          //     el.classList.remove('move');
-          //   }
-          //   el.classList.add('.move');
-          // }
-          // el.classList.add('.dmitem .dmitem' + index);
-          getNode(index);
-        }
+        getNode(index);
       });
     };
-    const distance = ref('0');
+    // const distance = ref('0');
     let styleList: any[] = reactive([]);
     const styleInfo = (index: number, nodeTop: string, width: number) => {
       // let n = Math.floor(Math.random() * (10 - 5)) + 5;
       let timeIndex = index - rows.value > 0 ? index - rows.value : 0;
       let list = styleList;
       let time = list[timeIndex] ? Number(list[timeIndex]['--time']) : 0;
-      distance.value = '-' + (speeds / 1000) * 200 + '%';
+      // distance.value = '-' + (speeds / 1000) * 200 + '%';
 
       let obj = {
         top: nodeTop,
@@ -190,26 +167,7 @@ export default create({
       }
     };
 
-    return { classTime, classes, danmuList, add, styleList, distance, danmuListSlots };
+    return { classTime, classes, danmuList, add, styleList, danmuListSlots };
   }
 });
 </script>
-
-<style lang="scss">
-@keyframes moving {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(v-bind('distance'));
-  }
-}
-@-webkit-keyframes moving {
-  from {
-    -webkit-transform: translateX(100%);
-  }
-  to {
-    transform: translateX(v-bind('distance'));
-  }
-}
-</style>

src/packages/__VUE/barrage/index.vue

@@ -79,6 +79,7 @@ export default create({
         danmuList.value = dmList;
       }
       setTimeout(() => {
+        dmBody.value?.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
         run();
       }, 300);
     });
@@ -116,27 +117,20 @@ export default create({
     const run = () => {
       clearInterval(timer);
       timer = 0;
-      timer = setInterval(() => {
+      timer = setTimeout(() => {
         play();
         run();
       }, props.frequency);
     };
-    const distance = ref('0');
+    // const distance = ref('0');
     const play = () => {
       if (!props.loop && index.value >= danmuList.value.length) {
         return;
       }
       const _index = props.loop ? index.value % danmuList.value.length : index.value;
       let el = document.createElement(`view`);
-
       if (slotDefault && typeof danmuList.value[_index] == 'object') {
         el = danmuList.value[_index];
-        if (el?.classList?.contains('dmitem')) {
-          el.classList.remove('dmitem');
-        }
-        if (el?.classList?.contains('move')) {
-          el.classList.remove('move');
-        }
         el?.classList?.add('dmitem');
       } else {
         el.innerHTML = danmuList.value[_index] as string;
@@ -158,12 +152,19 @@ export default create({
           const width = el.offsetWidth;
           el.style.width = width + 20 + 'px';
         }
+
         // el.style.left = "-"+(_index % rows.value) + 'px';
-        el.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
-        distance.value = '-' + (speeds / 1000) * 150 + '%';
+        // el.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
+        // document.documentElement.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
+        // distance.value = '-' + (speeds / 1000) * 150 + '%';
         el.dataset.index = `${_index}`;
         if (slotDefault) {
           index.value++;
+          el.addEventListener('animationend', () => {
+            if (el?.classList?.contains('move')) {
+              el.classList.remove('move');
+            }
+          });
         } else {
           el.addEventListener('animationend', () => {
             dmContainer.value.removeChild(el);
@@ -172,26 +173,7 @@ export default create({
         }
       });
     };
-    return { classTime, classes, danmuList, dmBody, dmContainer, add, distance };
+    return { classTime, classes, danmuList, dmBody, dmContainer, add };
   }
 });
 </script>
-
-<style lang="scss">
-@keyframes moving {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(v-bind('distance'));
-  }
-}
-@-webkit-keyframes moving {
-  from {
-    -webkit-transform: translateX(100%);
-  }
-  to {
-    transform: translateX(v-bind('distance'));
-  }
-}
-</style>

src/sites/mobile-taro/vue/src/business/pages/barrage/index.vue

@@ -4,15 +4,6 @@
     <nut-cell>
       <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
     </nut-cell>
-    <!-- <h2>slot 用法</h2>
-    <nut-cell>
-      <nut-barrage>
-        <span>aaa</span>
-        <span>bbb</span>
-        <span>ccc</span>
-        <span>ddd</span>
-      </nut-barrage>
-    </nut-cell> -->
     <div class="test">
       <button @click="addDanmu" class="add nut-button--primary">随机添加</button>
     </div>
@@ -26,7 +17,7 @@ export default {
   setup() {
     const inputVal = ref<any>('');
     const danmu = ref<any>(null);
-    let list = ref(['画美不看画美不看画美不看画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结']);
+    let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结']);
     function addDanmu() {
       let n = Math.random();
       danmu.value.add('随机——' + String(n).substr(2, 10));
@@ -47,14 +38,4 @@ export default {
   padding: 20px 0;
   height: 150px;
 }
-
-.test {
-  .add {
-    display: block;
-    padding: 5px 30px;
-    margin: 20px auto;
-    border-radius: 15px;
-    font-size: 12px;
-  }
-}
 </style>