弹幕

src/components/activity/newyear-2019/common/system-bullet-screen/index.js

@@ -8,24 +8,50 @@ class SystemBulletScreen extends Component {
 
   swiper
   count = 0
+  sysNotice
+
+  state = {
+    showNotices: true
+  }
 
   componentDidMount() {
     this.initializeSwiper()
   }
 
+  componentWillUnmount() {
+    this.swiper && this.swiper.destroy(true, true)
+  }
+
 
   initializeSwiper = () => {
     const _this = this
-    console.log(document.querySelector('.sys-bullet-screen-swiper-container'))
     this.swiper = new Swiper('.sys-bullet-screen-swiper-container', {
       allowTouchMove: false,
       direction: 'vertical',
+      loop: true,
       on: {
         init() {
-          let el = this.slides[this.activeIndex],
+          Array.from(this.slides).forEach(item => {
+            item.querySelector('span').addEventListener('transitionend', _this.transitionEnd)
+          })
+        },
+        slideChangeTransitionEnd() {
+          _this.slideHorizontal(this)
+        },
+        transitionEnd() {
+          const el = this.slides[this.previousIndex].querySelector('span')
+          el.style.transition = 'unset'
+          el.style.transform = 'translate3d(0,0,0)'
+        }
+      }
+    })
+  }
+
+  slideHorizontal = (swiper) => {
+    let el = swiper.slides[swiper.activeIndex],
       content = el.querySelector('span'),
       contentWidth = content.offsetWidth,
-            wrapperWidth = el.querySelector('div').clientWidth
+      wrapperWidth = el.clientWidth
 
     const co = 131.25
 
@@ -33,56 +59,71 @@ class SystemBulletScreen extends Component {
       content.style.transition = `transform ${contentWidth / co}s linear`
       setTimeout(() => {
         content.style.transform = `translate3d(${-(contentWidth - wrapperWidth) - 10}px,0,0)`
-            }, 3000)
-            console.log(contentWidth, wrapperWidth)
+      }, 1000)
     } else {
-            _this.swiper.slideNext()
-          }
-
-        },
-        transitionEnd() {
-          console.log(this.slides[this.activeIndex])
+      this.swiper.slideNext()
     }
   }
-    })
-  }
 
   transitionEnd = () => {
     const {
       bullets = [
-        '通知内容，后台编辑，单条超字左滑滚动显示完整，多条上下滚动轮播',
-        '通知内容，后台编辑，单条超字左滑滚动显示完整，多条上下滚动轮播',
-        '通知内容，后台编辑，单条超字左滑滚动显示完整，多条上下滚动轮播',
+        '第一条消息，第一条消息，第一条消息，第一条消息，第一条消息，第一条消息，',
+        '第二条消息，第二条消息，第二条消息，第二条消息，第二条消息，第二条消息，',
+        '第三条消息，第三条消息，第三条消息，第三条消息，第三条消息，第三条消息，',
       ]
     } = this.props
+
     const len = bullets.length * 3
 
+    if (++this.count === len) {
+      setTimeout(() => {
+        this.sysNotice.style.height = `0px`
+      }, 2000)
+    } else {
+      setTimeout(() => {
+        this.swiper && this.swiper.slideNext()
+      }, 1000)
+    }
+  }
+
+  removeSystemNotices = e => {
+    e.persist()
+    if(e.target === this.sysNotice){
+      this.setState({
+        showNotices: false
+      })
+    }
   }
 
   render() {
     const {
       bullets = [
-        '通知内容，后台编辑，单条超字左滑滚动显示完整，多条上下滚动轮播',
-        '通知内容，后台编辑，单条超字左滑滚动显示完整，多条上下滚动轮播',
-        '通知内容，后台编辑，单条超字左滑滚动显示完整，多条上下滚动轮播',
+        '第一条消息，第一条消息，第一条消息，第一条消息，第一条消息，第一条消息，',
+        '第二条消息，第二条消息，第二条消息，第二条消息，第二条消息，第二条消息，',
+        '第三条消息，第三条消息，第三条消息，第三条消息，第三条消息，第三条消息，',
       ]
     } = this.props
     return (
-      <div id='system-bullet-screen' className='sys-bullet-screen-swiper-container'>
+      this.state.showNotices &&
+      <div id="system-bullet-screen" onTransitionEnd={this.removeSystemNotices} ref={el => this.sysNotice = el}>
+        <img className='avatar'
+             src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/system-avatar.png' alt=""/>
+        <div className='sys-bullet-screen-swiper-container'>
           <ul className="swiper-wrapper">
             {
               bullets && bullets.length && bullets.map((item, index) => {
                 return (
                   <li className="swiper-slide" key={index}>
-                  <img className='avatar'
-                       src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/system-avatar.png' alt=""/>
-                  <div><span onTransitionEnd={this.transitionEnd}>{item}</span></div>
+                    <span>{item}</span>
                   </li>
                 )
               })
             }
           </ul>
         </div>
+      </div>
+
     )
   }
 }

src/components/activity/newyear-2019/common/system-bullet-screen/system-bullet-screen.scss

 @import "../user-bullet-screen/bullet-screen";
-#system-bullet-screen{
+
+#system-bullet-screen {
     overflow: hidden;
+    margin-top: 11px;
     margin-bottom: 16px;
-    li{
+    padding-left: 2px;
     display: flex;
-        overflow: hidden;
-        div{
-            width: 100%;
-            overflow: hidden;
+    align-items: center;
+    transition: height .3s ease-in-out;
+
+    .sys-bullet-screen-swiper-container{
+        height: 100%;
     }
-        span{
+
+    ul {
+        flex: auto;
+        max-width: 293px;
+    }
+
+    li {
+        overflow: hidden;
+        height: 30px;
+
+        span {
             display: inline-block;
             white-space: nowrap;
+            line-height: 30px;
         }
     }
+
     @extend .bullet-screen;
 }