feat(view): noticebar增加文字滚动功能

src/components/button/index.js

@@ -49,16 +49,11 @@ export default class AtButton extends Taro.Component {
     rootClassName = rootClassName.filter(str => str !== '')
 
     let component
-    // const _style = {
-    //   marginRight: '5px',
-    // }
     if (loading) {
       component = <View className='at-button__icon'><AtIcon value='loading' size='20'></AtIcon></View>
       rootClassName.push('at-button--icon')
     }
 
-    console.log(this.props.children)
-
     return (
       <View className={rootClassName} onClick={this.onClick.bind(this)}>
         {component}<View className='at-button__text'>{this.props.children}</View>

src/components/drawer/index.js

@@ -13,11 +13,12 @@ export default class AtDrawer extends Taro.Component {
   }
 
   onItemClick (index, e) {
+    this.props.onItemClick && this.props.onItemClick(index)
     this.animHide(e, index)
   }
 
   onHide () {
-    this.props.onClose(...arguments)
+    this.props.onClose && this.props.onClose()
   }
 
   animHide () {

src/components/icon/index.scss

@@ -16,7 +16,6 @@
   text-rendering: auto;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   vertical-align: middle;
   margin-top: -2px; // Hack
 }

src/components/noticebar/index.js

@@ -5,12 +5,14 @@ import AtIcon from '../icon/index'
 
 import './index.scss'
 
-
 export default class AtNoticebar extends Taro.Component {
   constructor () {
     super(...arguments)
+    const animElemId = `J_${Math.ceil(Math.random() * 10e5).toString(36)}`
     this.state = {
       show: true,
+      animElemId,
+      dura: 10000,
     }
   }
 
@@ -30,26 +32,61 @@ export default class AtNoticebar extends Taro.Component {
     }
   }
 
+  componentDidMount () {
+    if (!this.props.marquee) return
+    setTimeout(() => {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        const width = document.querySelector(`.${this.state.animElemId}`).getBoundingClientRect().width
+        const dura = width / (+this.props.speed)
+        this.setState({ dura })
+      } else if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
+        const query = Taro.createSelectorQuery().in(this.$scope)
+        query.select(`.${this.state.animElemId}`).boundingClientRect(res => {
+          const { width } = res
+          const dura = width / (+this.props.speed)
+          this.setState({ dura })
+        }).exec()
+      }
+    }, 0)
+  }
+
   render () {
     const {
-      close,
       moreUrl,
       single,
       icon,
+      marquee,
     } = this.props
+    let {
+      close,
+    } = this.props
+    const { dura } = this.state
     const rootClassName = ['at-noticebar']
     let _moreText = this.props.moreText
 
     if (!_moreText) _moreText = '查看详情'
-    if (moreUrl) rootClassName.push('at-noticebar--more')
-    if (single) rootClassName.push('at-noticebar--single')
+
+    const style = {}
+    const innerClassName = ['at-noticebar__content-inner']
+    if (marquee) {
+      close = false
+      rootClassName.push('at-noticebar--marquee')
+      style['animation-duration'] = `${dura}s`
+      innerClassName.push(this.state.animElemId)
+    } else {
+      if (moreUrl) rootClassName.push('at-noticebar--more')
+      if (single) rootClassName.push('at-noticebar--single')
+    }
 
     return (
       this.state.show &&
       <View className={rootClassName}>
         {close && <View className='at-noticebar__close' onClick={this.onClose.bind(this)}><AtIcon value='close' size='16' color='#ccc'></AtIcon></View>}
         <View className='at-noticebar__content'>
-          {icon && <View className='at-noticebar__content-icon'><AtIcon value={icon} size='16'></AtIcon></View>}{this.props.children}
+          {icon && <View className='at-noticebar__content-icon'><AtIcon value={icon} size='16'></AtIcon></View>}
+          <View className='at-noticebar__content-text'>
+            <Text className={innerClassName} style={style}>{this.props.children}</Text>
+          </View>
         </View>
         {moreUrl && <View className='at-noticebar__more' onClick={this.onGotoMore.bind(this)}><Text className='text'>{_moreText}</Text><View className='at-noticebar__more-icon'><AtIcon value='chevron-right' size='16'></AtIcon></View></View>}
       </View>
@@ -60,6 +97,8 @@ export default class AtNoticebar extends Taro.Component {
 AtNoticebar.defaultProps = {
   close: false,
   single: false,
+  marquee: false,
+  speed: 100,
   moreText: '查看详情',
   moreUrl: '',
   icon: '',
@@ -68,6 +107,8 @@ AtNoticebar.defaultProps = {
 AtNoticebar.propTypes = {
   close: PropTypes.bool,
   single: PropTypes.bool,
+  marquee: PropTypes.bool,
+  speed: PropTypes.number,
   moreText: PropTypes.string,
   moreUrl: PropTypes.string,
   icon: PropTypes.string,

src/components/noticebar/index.scss

@@ -9,7 +9,7 @@ $noticebar-icon-size: 26px;
   position: relative;
   padding: $spacing-v-sm $spacing-h-lg;
   color: $noticebar-color-font;
-  font-size: $font-size-sm;
+  font-size: 0;
   background: $noticebar-color-bg;
 
   &__content {
@@ -18,6 +18,13 @@ $noticebar-icon-size: 26px;
     &-icon {
       display: inline-block;
       margin-right: 12px;
+      vertical-align: top;
+      margin-top: 5px;
+    }
+
+    &-text {
+      display: inline;
+      font-size: $font-size-sm;
     }
   }
 
@@ -46,6 +53,31 @@ $noticebar-icon-size: 26px;
     }
   }
 
+  &--marquee {
+    .at-noticebar__content-text {
+      height: 36px;
+      line-height: 36px;
+      overflow: hidden;
+      display: block;
+    }
+
+    .at-noticebar__content-icon {
+      position: absolute;
+
+      + .at-noticebar__content-text {
+        margin-left: 45px;
+      }
+    }
+
+    .at-noticebar__content-inner {
+      display: inline-block;
+      height: 36px;
+      white-space: nowrap;
+      animation: marquee 1s linear infinite both;
+      padding-left: 100%;
+    }
+  }
+
   &__more {
     position: absolute;
     right: $spacing-h-lg;
@@ -67,3 +99,10 @@ $noticebar-icon-size: 26px;
     }
   }
 }
+
+@keyframes marquee {
+  100% {
+    // transform: translate3d(-100%, 0, 0);
+    transform: translateX(-100%);
+  }
+}

src/components/pagination/index.js

@@ -22,8 +22,7 @@ export default class AtPagination extends Taro.Component {
     current -= 1
     current = Math.max(1, current)
     if (originCur === current) return
-    this.props.pageChange && this.props.pageChange('prev', current)
-    // console.log('prev', current)
+    this.props.pageChange && this.props.pageChange({ type: 'prev', current })
     this.setState({ current })
   }
 
@@ -34,21 +33,18 @@ export default class AtPagination extends Taro.Component {
     current += 1
     current = Math.min(maxPage, current)
     if (originCur === current) return
-    this.props.pageChange && this.props.pageChange('next', current)
+    this.props.pageChange && this.props.pageChange({ type: 'next', current })
     this.setState({ current })
-    console.log('next', this.state, current)
   }
 
   render () {
     const {
       current,
       icon,
-      // simple,
       maxPage,
     } = this.state
 
     let rootClassName = ['at-pagination']
-    // if (simple) rootClassName.push('at-pagination--simple')
     if (icon) rootClassName.push('at-pagination--icon')
     rootClassName = rootClassName.filter(str => str !== '')
 
@@ -80,13 +76,11 @@ AtPagination.defaultProps = {
   total: 0,
   pageSize: 20,
   icon: false,
-  // simple: false,
 }
 
 AtPagination.propTypes = {
   current: PropTypes.number,
   total: PropTypes.number,
   pageSize: PropTypes.number,
   icon: PropTypes.bool,
-  // simple: PropTypes.bool,
 }

src/pages/navigation/drawer/index.js

@@ -31,16 +31,10 @@ export default class DrawerPage extends Taro.Component {
     })
   }
 
-  onClose (e, index) {
-    this.setState({
-      leftDrawerShow: false,
-      rightDrawerShow: false,
-    })
-
+  onItemClick (index) {
     const ENV = Taro.getEnv()
     let content
     if (typeof index !== 'number') {
-      // content = '你点击了遮罩关闭'
       content = ''
     } else {
       content = `你点击了第 ${+index + 1} 个项目`
@@ -49,6 +43,13 @@ export default class DrawerPage extends Taro.Component {
     else if (ENV === 'WEB') content && alert(content)
   }
 
+  onClose () {
+    this.setState({
+      leftDrawerShow: false,
+      rightDrawerShow: false,
+    })
+  }
+
   render () {
     return (
       <View className='page'>
@@ -60,7 +61,7 @@ export default class DrawerPage extends Taro.Component {
             <View className='panel__content no-padding'>
               <View className='example'>
                 <AtButton onClick={this.leftDrawerClick.bind(this)}>显示drawer</AtButton>
-                {this.state.leftDrawerShow && <AtDrawer show={this.state.leftDrawerShow} mask onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
+                {this.state.leftDrawerShow && <AtDrawer show={this.state.leftDrawerShow} mask onItemClick={this.onItemClick.bind(this)} onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
                 </AtDrawer>}
               </View>
             </View>
@@ -71,7 +72,7 @@ export default class DrawerPage extends Taro.Component {
             <View className='panel__content no-padding'>
               <View className='example'>
                 <AtButton onClick={this.rightDrawerClick.bind(this)}>显示drawer</AtButton>
-                {this.state.rightDrawerShow && <AtDrawer show={this.state.rightDrawerShow} right mask onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
+                {this.state.rightDrawerShow && <AtDrawer show={this.state.rightDrawerShow} right mask onItemClick={this.onItemClick.bind(this)} onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
                 </AtDrawer>}
               </View>
             </View>

src/pages/navigation/pagination/index.js

@@ -12,17 +12,9 @@ export default class PaginationPage extends Taro.Component {
 
   // onClose (e) {
 
-  //   const ENV = Taro.getEnv()
-  //   let content
-  //   if (typeof index !== 'number') {
-  //     // content = '你点击了遮罩关闭'
-  //     content = ''
-  //   } else {
-  //     content = `你点击了第 ${+index + 1} 个项目`
-  //   }
-  //   if (ENV === 'WEAPP') content && Taro.showModal({ content, showCancel: false })
-  //   else if (ENV === 'WEB') content && alert(content)
-  // }
+  onPage (data) {
+    console.log('pagination: ', data)
+  }
 
   render () {
     return (
@@ -36,7 +28,7 @@ export default class PaginationPage extends Taro.Component {
             <View className='panel__title'>文本按钮 + 页码</View>
             <View className='panel__content'>
               <View className='example-item'>
-                <AtPagination total='50' pageSize='10' current='1'></AtPagination>
+                <AtPagination total='50' pageSize='10' current='1' pageChange={this.onPage.bind(this)}></AtPagination>
               </View>
             </View>
           </View>

src/pages/view/noticebar/index.js

@@ -40,6 +40,22 @@ export default class NoticebarPage extends Taro.Component {
             </View>
           </View>
 
+          {/* 跑马灯 */}
+          <View className='panel'>
+            <View className='panel__title'>跑马灯</View>
+            <View className='panel__content'>
+              <View className='bar-item'>
+                <AtNoticebar marquee>[纯文字]这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏[结束]</AtNoticebar>
+              </View>
+              <View className='bar-item'>
+                <AtNoticebar marquee icon='volume-plus'>[带icon]这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏[结束]</AtNoticebar>
+              </View>
+              <View className='bar-item'>
+                <AtNoticebar marquee>[超长文本]这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏[结束]</AtNoticebar>
+              </View>
+            </View>
+          </View>
+
           {/* 图标 */}
           <View className='panel'>
             <View className='panel__title'>图标</View>