Merge pull request #319 from MercyMo/master

#3 #61 第3次实验代码

1514080901106/app.js

@@ -34,6 +34,7 @@ App({
     })
   },
   globalData: {
-    userInfo: null
+    userInfo: null,
+    height:900
   }
 })

1514080901106/app.json

@@ -1,12 +1,12 @@
 {
-  "pages":[
+  "pages": [
     "pages/index/index",
-    "pages/logs/logs"
+    "pages/show/show"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "风格化滤镜",
-    "navigationBarTextStyle":"black"
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle": "black"
   }
-}
+}

1514080901106/pages/index/index.js

@@ -1,76 +1,35 @@
 var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
-const app = getApp();
+var order = ['red', 'yellow', 'blue', 'green', 'red']
 Page({
   data: {
-    tabs: ["滤镜", "调整"],
-    activeIndex: 0,
+    tabs: ["滤镜", "调整", "show"],
+    activeIndex: 2,
     sliderOffset: 0,
     sliderLeft: 0,
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo')
   },
-
-  bindViewTap: function () {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
-  },
-
   onLoad: function () {
-    var that = this;
-    wx.getSystemInfo({
-      success: function (res) {
-        that.setData({
-          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
-          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
-        });
-      }
-    });
-
-    if (app.globalData.userInfo) {
-      this.setData({
-        userInfo: app.globalData.userInfo,
-        hasUserInfo: true
-      })
-    } else if (this.data.canIUse) {
-      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-      // 所以此处加入 callback 以防止这种情况
-      app.userInfoReadyCallback = res => {
-        this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
-        })
-      }
-    } else {
-      // 在没有 open-type=getUserInfo 版本的兼容处理
-      wx.getUserInfo({
-        success: res => {
-          app.globalData.userInfo = res.userInfo
-          this.setData({
-            userInfo: res.userInfo,
-            hasUserInfo: true
-          });
+     var that = this;
+     wx.getSystemInfo({
+        success: function (res) {
+           that.setData({
+              sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
+              sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
+           });
         }
-      });
-    }
+     })
   },
-
-
   tabClick: function (e) {
-    this.setData({
-      sliderOffset: e.currentTarget.offsetLeft,
-      activeIndex: e.currentTarget.id
-    });
+     console.dir("done");
+     this.setData({
+        sliderOffset: e.currentTarget.offsetLeft,
+        activeIndex: e.currentTarget.id
+     })
   },
 
-  getUserInfo: function (e) {
-    console.log(e)
-    app.globalData.userInfo = e.detail.userInfo
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
+  toShow:function(e){
+    wx.navigateTo({
+      url: '../show/show'
     })
   }
+
 });

1514080901106/pages/index/index.wxml

@@ -28,8 +28,13 @@
                  <button class="btn">文字</button>
                 </view>
                 </view>
-
+                <view class="weui-tab__content" hidden="{{activeIndex != 2}}">
+<view class="section">
+   <button class="btn" bindtap="toShow">show</button>
+</view>
+                </view>            
             </view>
         </view>
     </view>
 </view>
+

1514080901106/pages/show/show.js

@@ -0,0 +1,88 @@
+// pages/demo/scrollView.js
+
+var lastFrame = 0;
+var isFirstTime = true;
+var flag = true;
+var isMove = true;
+
+Page({
+
+
+  data: {
+    color: ['red', 'blue', 'green', 'Crimson', 'DarkOrange'],
+    top:0,
+    length:1,
+    isCar:true,
+    offset:0,
+  },
+
+  onLoad: function (options) {
+
+    var that = this
+    this.interval  =  setInterval(this.move, 10)  
+
+    // 设置窗口大小
+    wx.getSystemInfo({
+
+      success: (res) => {
+
+        that.setData({
+
+          windowHeight: res.windowHeight - 5,
+
+          windowWidth: res.windowWidth
+
+        })
+
+      }
+
+    })
+  },
+
+
+
+  onEnd: function (e) {
+    var that = this;
+    var l  = that.data.length + 1;
+    if(l <= 2) {
+      that.setData({
+        length:l,
+      })
+    }
+    else{
+       flag = false;
+    }
+  },
+
+  move:function(){
+    var that = this;
+    var m = that.data.top + 1;
+    var ofS = that.data.offset + 1;
+    var l = that.data.length + 1;
+    if(flag && isMove){
+      that.setData({
+        top:m,
+        offset:ofS
+      });
+    }
+    else if(isMove){
+      if(isFirstTime){
+        lastFrame = that.data.offset;
+        isFirstTime = false;
+      }
+      that.setData({
+        offset:ofS,
+      })
+      if(ofS - lastFrame >= 400){
+         that.setData({
+            isCar:false
+         });
+         isMove = false;
+      }
+    }
+    else{
+
+    }
+  }
+
+})

1514080901106/pages/show/show.json

@@ -0,0 +1 @@
+{}

1514080901106/pages/show/show.wxml

@@ -0,0 +1,29 @@
+<scroll-view class="page" scroll-y="true" style="height:{{windowHeight}}px;" bindscrolltolower="onEnd" scroll-top="{{top}}">
+<image class = "car" src = "../../res/car.png" style="width:70px; height:100px; top:{{offset}}px; left:110px" wx:if="{{isCar}}">
+</image>
+<image class = "car" src="../../res/boom.png" style="width:80px; height:120px; top:{{offset}}px; left:110px" wx:else>
+</image>
+<block wx:for="{{length}}"> 
+<view class="row">
+<view style="background:{{color[0]}};width:90px;height:100px"></view>
+<view class="right" style="background:{{color[0]}};width:90px;height:100px"></view>
+</view>
+<view class="row">
+<view style="background:{{color[1]}};width:90px;height:100px"></view>
+<view class="right" style="background:{{color[1]}};width:90px;height:100px"></view>
+</view>
+<view class="row">
+<view style="background:{{color[2]}};width:90px;height:100px"></view>
+<view class="right" style="background:{{color[2]}};width:90px;height:100px"></view>
+</view>
+<view class="row">
+<view style="background:{{color[3]}};width:90px;height:100px"></view>
+<view class="right" style="background:{{color[3]}};width:90px;height:100px"></view>
+</view>
+<view class="row">
+<view style="background:{{color[4]}};width:90px;height:100px"></view>
+<view class="right" style="background:{{color[4]}};width:90px;height:100px"></view>
+</view>
+</block>
+
+</scroll-view>

1514080901106/pages/show/show.wxss

@@ -0,0 +1,18 @@
+/* pages/show/show.wxss */
+.row{
+  display: flex;
+  flex-direction: row;
+}
+
+.col{
+  display: flex;
+  flex-direction: column;
+}
+
+.right{
+  margin-left: 110px;
+}
+
+.car{
+  position: absolute;
+}