hzuapps#71 第3次实验-实现滚动界面

1517010108/comp/sroll.js

@@ -0,0 +1,110 @@
+// pages/comp/scroll.js
+var base64 = require("../example/images/base64");
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    isEnd: false,
+    messages: [{
+      name: "张三",
+      last: "您好！"
+    }, {
+      name: "李四",
+      last: "您好！"
+    }, {
+      name: "李四",
+      last: "您好！"
+    }, {
+      name: "李四",
+      last: "您好！"
+    }, {
+      name: "李四",
+      last: "您好！"
+    }, {
+      name: "李四",
+      last: "您好！"
+    }, {
+      name: "李四",
+      last: "您好！"
+    }]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.setData({
+      icon20: base64.icon20,
+      icon60: base64.icon60
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+  onEnd: function () {
+    console.log("onEnd")
+    var that = this;
+    var data = that.data;
+    that.setData({
+      isEnd: true /*,
+      messages: data.messages.concat([{
+        name: "Tom",
+        last: "Hello!"
+      }, {
+        name: "john",
+        last: "yes."
+      }]) */
+    });
+
+  }
+})

1517010108/comp/sroll.json

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

1517010108/comp/sroll.wxml

@@ -0,0 +1,27 @@
+<!--pages/comp/scroll.wxml-->
+<scroll-view class="page" bindtouchend='onEnd'>
+    <view class="page__hd">
+        <view class="page__title">Panel</view>
+        <view class="page__desc">面板</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-panel weui-panel_access">
+            <view class="weui-panel__hd"></view>
+            <view class="weui-panel__bd">
+                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" wx:for="{{messages}}">
+                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
+                        <image class="weui-media-box__thumb" src="{{icon60}}" />
+                    </view>
+                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
+                        <view class="weui-media-box__title">{{index}} {{item.name}}</view>
+                        <view class="weui-media-box__desc">{{item.last}}</view>
+                    </view>
+                </navigator>
+            </view>
+        </view>
+        <view class='weui-loadmore' wx:if="{{isEnd}}">
+          <view class='weui-loading'></view>
+          <view class='weui-loadmore__tips'>正在加载……</view>
+        </view>
+    </view>
+</scroll-view>

1517010108/comp/sroll.wxss

@@ -0,0 +1 @@
+/* pages/comp/sroll.wxss */

1517010108/comp/view.js

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

1517010108/comp/view.json

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

1517010108/comp/view.wxml

@@ -0,0 +1,29 @@
+<!--pages/comp/view.wxml-->
+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Button</view>
+        <view class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</view>
+    </view>
+    <view class="page__bd page__bd_spacing">
+        <button class="weui-btn" type="primary">页面主操作 Normal</button>
+        <button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>
+
+        <button class="weui-btn" type="default">页面次要操作 Normal</button>
+        <button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>
+
+        <button class="weui-btn" type="warn">警告类操作 Normal</button>
+        <button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>
+
+        <view class="button-sp-area">
+            <button class="weui-btn" type="primary" plain="true">按钮</button>
+            <button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>
+
+            <button class="weui-btn" type="default" plain="true">按钮</button>
+            <button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>
+
+            <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
+            <button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
+            <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>
+        </view>
+    </view>
+</view>

1517010108/comp/view.wxss

@@ -0,0 +1,7 @@
+/* pages/comp/view.wxss */
+page{
+    background-color: #efefef;
+}
+image{
+    margin: 4px 0;
+}