弹幕

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

@@ -8,81 +8,122 @@ 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],
-            content = el.querySelector('span'),
-            contentWidth = content.offsetWidth,
-            wrapperWidth = el.querySelector('div').clientWidth
-
-          const co = 131.25
-
-          if (contentWidth > wrapperWidth) {
-            content.style.transition = `transform ${contentWidth / co}s linear`
-            setTimeout(() => {
-              content.style.transform = `translate3d(${-(contentWidth - wrapperWidth) - 10}px,0,0)`
-            }, 3000)
-            console.log(contentWidth, wrapperWidth)
-          } else {
-            _this.swiper.slideNext()
-          }
-
+          Array.from(this.slides).forEach(item => {
+            item.querySelector('span').addEventListener('transitionend', _this.transitionEnd)
+          })
+        },
+        slideChangeTransitionEnd() {
+          _this.slideHorizontal(this)
         },
         transitionEnd() {
-          console.log(this.slides[this.activeIndex])
+          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.clientWidth
+
+    const co = 131.25
+
+    if (contentWidth > wrapperWidth) {
+      content.style.transition = `transform ${contentWidth / co}s linear`
+      setTimeout(() => {
+        content.style.transform = `translate3d(${-(contentWidth - wrapperWidth) - 10}px,0,0)`
+      }, 1000)
+    } else {
+      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'>
-        <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>
-                </li>
-              )
-            })
-          }
-        </ul>
+      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}>
+                    <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{
-        display: flex;
+    padding-left: 2px;
+    display: flex;
+    align-items: center;
+    transition: height .3s ease-in-out;
+
+    .sys-bullet-screen-swiper-container{
+        height: 100%;
+    }
+
+    ul {
+        flex: auto;
+        max-width: 293px;
+    }
+
+    li {
         overflow: hidden;
-        div{
-            width: 100%;
-            overflow: hidden;
-        }
-        span{
+        height: 30px;
+
+        span {
             display: inline-block;
             white-space: nowrap;
+            line-height: 30px;
         }
     }
+
     @extend .bullet-screen;
 }