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

1517060322/pages/comp/scroll.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."
+      }]) */
+    });
+
+  }
+})

1517060322/pages/comp/scroll.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>

1517060322/pages/comp/scroll.wxss

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