添加顶部跑马灯

src/components/z-scroll-text.wpy

@@ -0,0 +1,92 @@
+<style lang="less">
+  @import "../style/z-scroll-text.less";
+</style>
+<!--跑马灯文字-->
+<template>
+  <view animation="{{displayAnimationData}}" class="scroll-container ">
+    <text class="scroll-content" decode="{{true}}" style="right:{{announZf}}{{announNum}}px">{{title}}</text>
+    <view class="scroll-icon left">
+      <i class="icon-bullhorn"></i>
+    </view>
+    <view class="scroll-icon right red" @tap="closeMe">
+      <i class="icon-cancel-circle"></i>
+    </view>
+  </view>
+</template>
+<script>
+  import wepy from 'wepy'
+  import base from '../mixins/base';
+
+  export default class zScrollText extends wepy.component {
+    mixins = [base];
+    props = {
+      show: true
+    }
+    data = {
+      title: '',
+      announNum : 0,
+      announy : 280,
+      announZf : '-',
+      interval: null,
+      displayAnimationData: {},
+    }
+    methods = {
+      showScrollText({title = ''}) {
+        this.title = title;
+        this.show = true;
+        this.$apply();
+        this.toggleShow();
+        this.excuseScrollAnimation();
+      },
+      closeMe() {
+        this.show = false;
+        this.toggleShow();
+      }
+    }
+    excuseScrollAnimation = async () => {
+      //加上100是因为防止在归零时出现闪烁的情况
+      let maxContentWidth = wepy.getSystemInfoSync().windowWidth + 100;
+      let self = this;
+      let maxTextWidth = await this.queryViewWidth('scroll-content');
+      self.announNum =  maxTextWidth
+      self.$apply();
+      if (self.interval) {
+        clearInterval(self.interval);
+      }
+      this.interval = setInterval(()=>{
+        if(self.announZf === '-') {
+          if(self.announNum <= 0) {
+            self.announZf = ''
+          } else {
+            self.announNum -= 1
+          }
+        } else {
+          if(self.announNum > (maxContentWidth)) {
+            //归位
+            self.announZf = '-'
+            self.announNum = maxTextWidth
+          } else {
+            self.announNum += 1
+          }
+        }
+        self.$apply();
+      }, 20)
+    }
+    toggleShow = () => {
+      // 原生动画
+      let animation = wepy.createAnimation({
+        duration: 400,
+        timingFunction: 'ease'
+      })
+      wx.createSelectorQuery()
+        .select('.scroll-container')
+        .boundingClientRect((rect) => {
+          this.show
+            ? animation.translateY().step()
+            : animation.translateY(-rect.height).step()
+          this.displayAnimationData = animation.export()
+          this.$apply()
+        }).exec();
+    }
+  }
+</script>

src/components/z-search-bar.wpy

@@ -1,6 +1,6 @@
 <!--顶部搜索条-->
 <style lang="less">
-  @import "../style/search.less";
+  @import "../style/z-search-bar.less";
 </style>
 <template>
   <view class="z-search-bar">

src/mixins/base.js

@@ -180,4 +180,16 @@ export default class baseMixin extends wepy.mixin {
       return console.log(e);
     }
   }
+  /**
+   * 根据class获取宽度
+   * */
+  queryViewWidth(viewClass) {
+    //创建节点选择器
+    return new Promise(function(resolve) {
+      let query = wx.createSelectorQuery();
+      query.select('.' + viewClass).boundingClientRect(function(rect) {
+        resolve(rect.width);
+      }).exec();
+    });
+  }
 }

src/pages/index.wpy

@@ -57,6 +57,7 @@
     <toast/>
     <inviteView :config.sync="inviteViewCfg" :btnList.sync="inviteBtns" @inviteBtnClick.user="inviteBtnClick" @needHideMe.user="hideInviteView"></inviteView>
     <zanToptips/>
+    <zScrollText/>
   </view>
 </template>
 
@@ -76,6 +77,7 @@
   import tips from '../mixins/tips';
   import cfg from '../mixins/cfg';
   import nav from '../mixins/nav';
+  import zScrollText  from '../components/z-scroll-text';
 
   export default class Index extends wepy.page {
     mixins = [base, tips, cfg, nav];
@@ -91,7 +93,8 @@
       myGame: recentGame,
       zanLoadmore: zanLoadmore,
       inviteView: inviteView,
-      zanToptips: zanToptips
+      zanToptips: zanToptips,
+      zScrollText: zScrollText
     };
 
     data = {
@@ -134,9 +137,10 @@
         this.$toGameInfo(gid);
       },
       async toSearch() {
-        wepy.navigateTo({
+        this.showScollText('你已成功领取100元代金券，点击查看详情，想看就看，你已成功领取100元代金券，点击查看详情，想看就看，你已成功领取100元代金券，点击查看详情，想看就看');
-          url: '/pages/search'
+        // wepy.navigateTo({
-        })
+        //   url: '/pages/search'
+        // })
         // let movie = 'http://iqiyi.kuyun-bofang.com/20190208/eebojrT3/index.m3u8'
         // this.$toMovie(movie, '流浪地球');
       },
@@ -343,6 +347,9 @@
     showTopTips(msg, type = 'error') {
       this.$invoke('zanToptips', 'showZanTopTips', { content: msg, type: type})
     }
+    showScollText(title) {
+      this.$invoke('zScrollText', 'showScrollText', {title: title})
+    }
     async getRecentGames() {
       try {
         let res = await http.post('/api/emulated/recent_games');

src/style/font.wxss

@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'xmjlicons';
-  src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
+  src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
   font-weight: normal;
   font-style: normal;
 }
@@ -20,6 +20,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-bullhorn:before {
+  content: "\e91a";
+}
 .icon-cart:before {
   content: "\e93a";
 }
@@ -32,6 +35,9 @@
 .icon-star-full:before {
   content: "\e9d9";
 }
+.icon-cancel-circle:before {
+  content: "\ea0d";
+}
 .icon-checkmark:before {
   content: "\ea10";
 }

src/style/z-scroll-text.less

@@ -0,0 +1,37 @@
+@zScrollBarHeight: 60rpx;
+@zScrollBarBackColor: green;
+.scroll-container {
+  display: block;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  transform: translateY(-100%);
+  line-height: 60rpx;
+  font-size: 20rpx;
+  height: @zScrollBarHeight;
+  text-align: center;
+  z-index: 110;
+  background-color: @zScrollBarBackColor;
+}
+.scroll-container .scroll-content {
+  white-space: nowrap;
+  position: absolute;
+  top: 0;
+  font-size: 14px;
+}
+.scroll-container .scroll-icon {
+  background-color: @zScrollBarBackColor;
+  position: absolute;
+  top: 0;
+  width: @zScrollBarHeight;
+  height: @zScrollBarHeight;
+  font-size: @zScrollBarHeight/3*2;
+}
+.scroll-container .left {
+  left: 0;
+}
+.scroll-container .right {
+  right: 0;
+  color: red;
+}
+