Merge branch 'master' of http://git.cc-lotus.info/ball-court/ball-applet

pages/club/index.js

@@ -2,12 +2,38 @@ const app = getApp()
 Page({
     data: {
         frameStyle: { useTop: true, name: '俱乐部', leftArrow: false, useBar: true },
+        src: '/image/group.png',
+        list: [
+            { name: '宝藏俱乐部', founder: '宝藏', add: '长春市朝阳区前进大街1244号', project: '羽毛球', time: '2000-02-01', tel: '0431-800-800-8800' },
+            { name: '英语俱乐部', founder: '英语', time: '2000-02-01', add: '长春市朝阳区前进大街1244号', project: '羽毛球', tel: '0431-800-800-8800' },
+            { name: '宝藏俱乐部', founder: '宝藏', add: '长春市朝阳区前进大街1244号', project: '羽毛球', time: '2000-02-01', tel: '0431-800-800-8800' },
+            { name: '英语俱乐部', founder: '英语', time: '2000-02-01', add: '长春市朝阳区前进大街1244号', project: '羽毛球', tel: '0431-800-800-8800' },
+        ],
+        total: 0,
+        page: 0,
+        skip: 0,
+        limit: 5,
     },
     // 跳转菜单
     tabPath(e) {
         let { route } = e.detail.detail;
         if (route) wx.redirectTo({ url: `/${route}` })
     },
+    // 分页
+    toPage: function () {
+        const that = this;
+        let list = that.data.list;
+        let limit = that.data.limit;
+        if (that.data.total > list.length) {
+            wx.showLoading({ title: '加载中', mask: true })
+            let page = that.data.page + 1;
+            that.setData({ page: page })
+            let skip = page * limit;
+            that.setData({ skip: skip })
+            that.watchLogin();
+            wx.hideLoading()
+        } else { wx.showToast({ title: '没有更多数据了', icon: 'none', duration: 2000 }) }
+    },
     /**
      * 生命周期函数--监听页面加载
      */

pages/club/index.less

@@ -30,6 +30,64 @@
     }
 
     .two {
-        background-color: #0000ff;
+        flex-grow: 1;
+        position: relative;
+
+        .list {
+            height: 120px;
+            padding: 2vw;
+            margin: 2vw 2vw 0;
+            border-radius: 10px;
+
+            .content {
+                flex-grow: 1;
+                z-index: 999;
+
+                .name {
+                    font-size: var(--font18Szie);
+                    text-align: center;
+                }
+
+                .text1 {
+                    font-size: var(--font14Size);
+
+                    text {
+                        color: var(--whiteColor);
+                    }
+                }
+            }
+
+            .bg {
+                position: relative;
+                top: -120px;
+                left: 40vw;
+
+                image {
+                    width: 200px;
+                }
+            }
+        }
+
+        .list:nth-child(1n) {
+            background-image: linear-gradient(to right, #9bd1fd, #44a2f0);
+        }
+
+        .list:nth-child(2n) {
+            background-image: linear-gradient(to right, #ffaed4, #eb5299);
+
+        }
+    }
+}
+
+.scroll-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .list-scroll-view {
+        display: flex;
+        flex-direction: column;
     }
 }

pages/club/index.wxml

@@ -9,7 +9,24 @@
             </view>
         </view>
         <view class="two">
-            俱乐部
+            <scroll-view scroll-y="true" class="scroll-view" bindscrolltolower="toPage">
+                <view class="list-scroll-view">
+                    <view class="list" wx:for="{{list}}" wx:key="item">
+                        <view class="content">
+                            <view class="name">{{item.name}}</view>
+                            <view class="text1">创始人：<text>{{item.founder}}</text></view>
+                            <view class="text1">创建时间：<text>{{item.time}}</text></view>
+                            <view class="text1">项目：<text>{{item.project}}</text></view>
+                            <view class="text1">电话：<text>{{item.tel}}</text></view>
+                            <view class="text1">地址：<text>{{item.add}}</text></view>
+                        </view>
+                        <view class="bg">
+                            <image src="{{src}}" mode="widthFix">
+                            </image>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
         </view>
     </view>
 </mobile-main>

pages/club/index.wxss

@@ -25,5 +25,51 @@
   font-size: var(--font14Size);
 }
 .main .two {
-  background-color: #0000ff;
+  flex-grow: 1;
+  position: relative;
+}
+.main .two .list {
+  height: 120px;
+  padding: 2vw;
+  margin: 2vw 2vw 0;
+  border-radius: 10px;
+}
+.main .two .list .content {
+  flex-grow: 1;
+  z-index: 999;
+}
+.main .two .list .content .name {
+  font-size: var(--font18Szie);
+  text-align: center;
+}
+.main .two .list .content .text1 {
+  font-size: var(--font14Size);
+}
+.main .two .list .content .text1 text {
+  color: var(--whiteColor);
+}
+.main .two .list .bg {
+  position: relative;
+  top: -120px;
+  left: 40vw;
+}
+.main .two .list .bg image {
+  width: 200px;
+}
+.main .two .list:nth-child(1n) {
+  background-image: linear-gradient(to right, #9bd1fd, #44a2f0);
+}
+.main .two .list:nth-child(2n) {
+  background-image: linear-gradient(to right, #ffaed4, #eb5299);
+}
+.scroll-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.scroll-view .list-scroll-view {
+  display: flex;
+  flex-direction: column;
 }