功能优化

496_dongfengqichen/pages/luckyStar/luckyStar.js

@@ -1,5 +1,6 @@
 // pages/luckyStar/luckyStar.js
-const app = getApp()
+const app = getApp();
+var query = null;
 Page({
 
   /**
@@ -36,20 +37,22 @@ Page({
       page:1,
       count:10
     },
-    gameAwardList:[],
+    gameAwardList:"",
+    gameAwardListArr:"",
     userData:null,
     scrollNum:0,
     setInt:null,
-    isMore:true,
     startDown:-1,//游戏开始倒计时
     clawType:false,//是否正在抓取
-    gameEnd:true
+    gameEnd:true,
+    ani:null
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
+    query = wx.createSelectorQuery();
     app.globalData.nowPage = 3;
     if (app.globalData.openid) {
       this.loadFun(); 
@@ -392,21 +395,67 @@ Page({
   getGameAwardList: function () {//获取游戏中奖数据
     app.wxRequest(app.globalData.urlRoot + "award/getGameAwardList", this.data.configure,res=>{
       if(res.code==200){
-        if(res.data.length<this.data.configure.count){
-          this.data.isMore = false;
-        }
-        for(let i=0;i<res.data.length;i++){
-          this.data.gameAwardList.push(res.data[i]);
-        }
-        this.setData({
-          gameAwardList: this.data.gameAwardList
-        })
-        if(this.data.configure.page==1){
-          this.changeScroll();
+        if(res.data){
+          var stringContent = "";//字符串内容
+          for (let i = 0; i < res.data.length; i++) {//内容整合
+            res.data[i].content = "恭喜" + (res.data[i].nickName ? res.data[i].nickName : '***') + "获得" + res.data[i].awardName+"  ";
+            stringContent += res.data[i].content;
+          }
+          this.data.gameAwardListArr += stringContent;
+          stringContent = stringContent.substring(0, stringContent.length - 2);
+          this.setData({
+            gameAwardList: stringContent
+          })
+          query.select('.textFrame').boundingClientRect();
+          query.select('.tipContent').boundingClientRect();
+          var duration = 0;//动画时常
+          query.exec((option) => {
+            duration = option[1].width < option[0].width ? 10 : option[1].width / option[0].width * 10;
+            this.aniFun(duration * 1000, -option[1].width);
+            if (res.data.length >= this.data.configure.count) {
+              console.log("还有更多数据");
+              setTimeout(() => {
+                this.aniFun(0, '100%');
+                this.data.configure.page += 1;
+                this.getGameAwardList();
+              }, duration * 1000)
+            } else {
+              console.log("没有更多数据了");
+              setTimeout(() => {
+                this.aniFun(0, '100%');
+                this.data.gameAwardListArr = this.data.gameAwardListArr.substring(0, this.data.gameAwardListArr.length - 2);
+                this.setData({
+                  gameAwardList: this.data.gameAwardListArr
+                })
+                query.select('.textFrame').boundingClientRect();
+                query.select('.tipContent').boundingClientRect();
+                query.exec((option) => {
+                  duration = option[1].width < option[0].width ? 10 : option[1].width / option[0].width * 10;
+                  this.noMoreData(duration * 1000, -option[1].width);
+                })
+              },duration * 1000);
+            }
+          })
         }
       }
     },this)
   },
+  noMoreData: function (duration,left){
+    this.aniFun(duration, left);
+    setTimeout(() => {
+      this.aniFun(0, '100%');
+      this.noMoreData(duration, left);
+    }, duration)
+  },
+  aniFun(duration,left){
+    var animation = wx.createAnimation({
+      duration: duration
+    });
+    animation.left(left).step();
+    this.setData({
+      ani: animation.export()
+    })
+  },
   getUserWxMsg: function (e) {//通过微信获取用户信息
     if (e.detail.errMsg == "getUserInfo:ok") {
       this.gameStart();
@@ -418,23 +467,6 @@ Page({
       this.gameStart();
     }
   },
-  changeScroll:function(){
-    this.data.setInt = setInterval(()=>{
-      this.setData({
-        scrollNum: this.data.scrollNum+=1
-      })
-    },30);
-  },
-  getMore:function(){
-    if (!this.data.isMore){
-      this.setData({
-        scrollNum: 0
-      })
-      return;
-    }
-    this.data.configure.page+=1;
-    this.getGameAwardList();
-  },
   cutPage:function(){//500元待领取
     wx.redirectTo({
       url: '/pages/star/star',

496_dongfengqichen/pages/luckyStar/luckyStar.wxml

@@ -15,7 +15,9 @@
         <view class="prizeTipLine"></view>
       </view>
       <view class="tipContentGroup">
-        <scroll-view class="scrollSty"  bindscrolltolower="getMore"  scroll-left="{{scrollNum}}" scroll-x="{{true}}"><view class="tipContent" style="width: 750rpx;"></view><view class="tipContent" wx:for="{{gameAwardList}}" wx:key="index">{{"恭喜"+(item.nickName?item.nickName:'***')+"获得"+(item.awardName?item.awardName:'***')}}</view><view class="tipContent" style="width: 750rpx;"></view></scroll-view>
+        <view class="textFrame">
+            <text space="emsp" class="tipContent" animation="{{ani}}">{{gameAwardList}}</text>
+        </view>
         <view class="scrollMask"></view>
       </view>
       <view class="prizeLookGroup">

496_dongfengqichen/pages/luckyStar/luckyStar.wxss

@@ -275,26 +275,26 @@ view{
   margin: 0 auto;
   box-sizing: border-box;
   border: 1rpx solid #4B6782;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  padding: 0 20rpx;
   border-radius: 20rpx;
   overflow: hidden;
   position: relative;
 }
-/* .tipContentGroup::-webkit-scrollbar {
+.tipContentGroup>view::-webkit-scrollbar {
   display:none;
   width:0;
   height:0;
   color:transparent;
-} */
+}
 .tipContent{
+  position: absolute;
+  top:0;
+  left: 100%;
   font-size:21rpx;
   font-family:PingFangSC;
   font-weight:400;
   color:rgba(21,83,136,1);
-  line-height:62rpx;
-  padding-right: 10rpx;
+  line-height:72rpx;
   white-space: nowrap;
 }
 .prizeLookGroup{
@@ -395,4 +395,10 @@ view{
   position: absolute;
   top: 0;
   left: 0;
+}
+.textFrame{
+  width:100%;
+  height:100%;
+  overflow: auto;
+  position:relative;
 }