fix: barrage 小程序不展示问题处理

.gitignore

@@ -4,6 +4,7 @@ node_modules
 /libs
 /jd/upload.js
 yarn.lock
+pnpm-lock.yaml
 package-lock.json
 /cache
 /src/nutui.ts

src/packages/__VUE/barrage/index.scss

@@ -6,7 +6,7 @@
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: #f7f8fa;
+  --move-distance: '300%';
   &__item {
     width: 100px;
     display: block;
@@ -25,6 +25,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 {

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

@@ -32,7 +32,7 @@ export default create({
     },
     speeds: {
       type: Number,
-      default: 800
+      default: 2000
     },
     rows: {
       type: Number,
@@ -74,8 +74,6 @@ export default create({
         const list = document
           .getElementsByClassName('nut-barrage__slotBody' + classTime)[0]
           .getElementsByClassName('nut-barrage__item');
-        console.log(list);
-
         let childrens = list?.[0]?.children || [];
         danmuList.value = childrens;
       }
@@ -121,20 +119,16 @@ export default create({
 
     const runStep = () => {
       danmuList.value.forEach((item: any, index: number) => {
-        if (typeof danmuList.value[index] == 'object') {
-          getNode(index);
-        } else {
-          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 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,
@@ -152,26 +146,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,12 +117,12 @@ 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;
@@ -131,12 +132,6 @@ export default create({
 
       if (slotDefault && typeof danmuList.value[_index] == 'object') {
         el = danmuList.value[_index];
-        if (el?.classList?.contains('nut-barrage__item')) {
-          el.classList.remove('nut-barrage__item');
-        }
-        if (el?.classList?.contains('move')) {
-          el.classList.remove('move');
-        }
         el?.classList?.add('nut-barrage__item');
       } else {
         el.innerHTML = danmuList.value[_index] as string;
@@ -159,11 +154,16 @@ export default create({
           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`);
+        // 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 +172,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>