hzuapps#2 hzuapps#79 第2次实验代码

1514080901201/app.js

@@ -36,4 +36,4 @@ App({
   globalData: {
     userInfo: null
   }
-})
+})

1514080901201/app.json

@@ -1,12 +1,17 @@
 {
   "pages":[
+
     "pages/index/index",
-    "pages/logs/logs"
+    "pages/logs/logs",
+    "pages/blank/blank",
+    "pages/other/other",
+    "pages/photo/photo",
+    "pages/shangchuan/shangchuan"
+
   ],
   "window":{
     "backgroundTextStyle":"light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "GraffitI",
-    "navigationBarTextStyle":"black"
-  }
-}
+    "navigationBarTextStyle":"black",
+    "enablePullDownRefresh": t

1514080901201/app.wxss

@@ -1,4 +1,5 @@
 /**app.wxss**/
+@import  "/pages/weui.wxss";
 .container {
   height: 100%;
   display: flex;

1514080901201/pages/blank/blank.js

@@ -0,0 +1,65 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

1514080901201/pages/blank/blank.wxml

@@ -0,0 +1,5 @@
+<view class="page">
+<view>
+<text>空白页模版</text>
+</view>
+</view>

1514080901201/pages/index/index.js

@@ -2,53 +2,51 @@
 //获取应用实例
 const app = getApp()
 
+
+var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
+
 Page({
   data: {
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo')
-  },
-  //事件处理函数
-  bindViewTap: function() {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
+    tabs: ["图片涂鸦", "空白涂鸦"],
+    activeIndex: 1,
+    sliderOffset: 0,
+    sliderLeft: 0
   },
   onLoad: function () {
-    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
-        })
+    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
+        });
       }
-    } else {
-      // 在没有 open-type=getUserInfo 版本的兼容处理
-      wx.getUserInfo({
-        success: res => {
-          app.globalData.userInfo = res.userInfo
-          this.setData({
-            userInfo: res.userInfo,
-            hasUserInfo: true
-          })
-        }
-      })
-    }
+    });
   },
-  getUserInfo: function(e) {
-    console.log(e)
-    app.globalData.userInfo = e.detail.userInfo
+  tabClick: function (e) {
     this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
+      sliderOffset: e.currentTarget.offsetLeft,
+      activeIndex: e.currentTarget.id
+    });
+  },
+  btn_1: function () {
+    wx.navigateTo({
+      url: '../blank/blank'
+    })
+  },
+  btn_2: function () {
+    wx.navigateTo({
+      url: '../other/other'
+    })
+  },
+  btn_3: function () {
+    wx.navigateTo({
+      url: '../photo/photo'
+    })
+  },
+  btn_4: function () {
+    wx.navigateTo({
+      url: '../shangchuan/shangchuan'
     })
   }
-})
+});

1514080901201/pages/index/index.wxml

@@ -1,13 +1,38 @@
 <!--index.wxml-->
-<view class="container">
-  <view class="userinfo">
-    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
-    <block wx:else>
-      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
-    </block>
-  </view>
-  <view class="usermotto">
-    <text class="user-motto">{{motto}}</text>
-  </view>
+
+<view class="page">
+    <view class="page__bd">
+        <view class="weui-tab">
+            <view class="weui-navbar">
+                <block wx:for="{{tabs}}" wx:key="*this">
+                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
+                        <view class="weui-navbar__title">{{item}}</view>
+                    </view>
+                </block>
+                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
+            </view>
+
+
+            <view class="weui-tab__panel">
+        <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
+              <view class="button-sp-area">
+                <button class="weui-btn" type="primary" plain="true" bindtap="btn_3">拍照</button>
+
+               <button class="weui-btn" type="primary" plain="true" bindtap="btn_4">本地相册</button>
+
+            </view>
+        </view>
+      <view class="weui-tab__content" hidden="{{activeIndex != 1}}">
+
+        <view class="button-sp-area">
+            <button class="weui-btn" type="primary" plain="true" bindtap="btn_1">空白页</button>
+
+            <button class="weui-btn" type="primary" plain="true" bindtap="btn_2">其他</button>
+
+        </view>
+      </view>
+
+            </view>
+        </view>
+    </view>
 </view>

1514080901201/pages/index/index.wxss

@@ -1,21 +1,21 @@
-/**index.wxss**/
-.userinfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
 
-.userinfo-avatar {
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
+page,
+.page,
+.page__bd{
+    height: 100%;
 }
-
-.userinfo-nickname {
-  color: #aaa;
+.page__bd{
+    padding-bottom: 0;
+}
+.weui-tab__content{
+    padding-top: 60px;
+    text-align: center;
+}
+.button-sp-area{
+    margin: 0 auto;
+    padding-top: 15px;
+    width: 60%;
+}
+.mini-btn{
+    margin-right: 5px;
 }
-
-.usermotto {
-  margin-top: 200px;
-}

1514080901201/pages/other/other.js

@@ -0,0 +1,65 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

1514080901201/pages/other/other.wxml

@@ -0,0 +1,5 @@
+<view class="page">
+<view>
+<text>其他</text>
+</view>
+</view>