开发朋友页面

pages/follow/index.js

@@ -1,47 +1,37 @@
 import {
   getFansList
 } from '~/api/user'
+import reachBottom from '~/mixins/reachBottom'
 Page({
-
+  behaviors: [reachBottom],
   /**
    * 页面的初始数据
    */
   data: {
-    list: [],
-    pageNo: 1,
-    totalSize: 0
+    currentType: 1
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    this.getFansList()
+    this.resetData()
   },
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-    if (this.data.totalSize > this.data.list.length) {
-      this.setData({
-        pageNo: this.data.pageNo + 1
-      })
-      this.getFansList()
-    }
+  setType({
+    currentTarget
+  }) {
+    console.log(currentTarget.dataset.type);
+    this.setData({
+      currentType: currentTarget.dataset.type
+    })
+    this.resetData()
   },
-  async getFansList() {
-    let {
-      list,
-      totalSize
-    } = await getFansList({
-      pageNo: this.data.pageNo,
+  // 获取分类的内容
+  loadMore() {
+    let type = this.data.currentType
+    this.getData(getFansList, {
       pageSize: 20
     })
-    list = [...this.data.list, ...list]
-    this.setData({
-      list,
-      totalSize
-    })
   },
   jumpUserInfo({
     currentTarget

pages/follow/index.json

@@ -2,5 +2,5 @@
   "usingComponents": {
     "emptyBg": "/components/empty/index"
   },
-  "navigationBarTitleText": "我的关注"
+  "navigationBarTitleText": "朋友"
 }

pages/follow/index.less

@@ -1,66 +1,86 @@
 .followBox {
-    padding: 0rpx 20rpx 20rpx;
+  padding: 0rpx 20rpx 20rpx;
 
-    .follow {
-        box-sizing: border-box;
-        width: 100%;
-        background-color: white;
-        border-radius: 10rpx;
-        margin-bottom: 20rpx;
-        padding: 20rpx;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+  .screening {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: 0rpx 64rpx;
+    box-sizing: border-box;
 
-        .userInfo {
-            display: flex;
+    .type {
+      color: #666;
+      font-size: 26rpx;
+    }
+
+    .currentType {
+      color: #333;
+      font-weight: bold;
+      font-size: 34rpx;
+    }
+  }
+
+  .follow {
+    margin-top: 40rpx;
+    box-sizing: border-box;
+    width: 100%;
+    background-color: white;
+    border-radius: 10rpx;
+    margin-bottom: 20rpx;
+    padding: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-            .avatar {
-                position: relative;
+    .userInfo {
+      display: flex;
 
-                .avatar-image {
-                    width: 96rpx;
-                    height: 96rpx;
-                    background-color: wheat;
-                    border-radius: 50%;
-                    border: 4rpx solid #61CA54;
-                }
+      .avatar {
+        position: relative;
 
-                .user-profession {
-                    width: 68rpx;
-                    height: 24rpx;
-                    background: rgba(97, 202, 84, 1);
-                    border-radius: 50rpx;
-                    border: 2rpx solid rgba(255, 255, 255, 1);
-                    font-size: 16rpx;
-                    color: rgba(255, 255, 255, 1);
-                    line-height: 24rpx;
-                    text-align: center;
-                    position: absolute;
-                    bottom: -4rpx;
-                    left: 17rpx;
-                }
-            }
+        .avatar-image {
+          width: 96rpx;
+          height: 96rpx;
+          background-color: wheat;
+          border-radius: 50%;
+          border: 4rpx solid #61CA54;
+        }
 
-            .nickName {
-                margin-left: 14rpx;
-                margin-top: 2rpx;
-            }
+        .user-profession {
+          width: 68rpx;
+          height: 24rpx;
+          background: rgba(97, 202, 84, 1);
+          border-radius: 50rpx;
+          border: 2rpx solid rgba(255, 255, 255, 1);
+          font-size: 16rpx;
+          color: rgba(255, 255, 255, 1);
+          line-height: 24rpx;
+          text-align: center;
+          position: absolute;
+          bottom: -4rpx;
+          left: 17rpx;
         }
+      }
+
+      .nickName {
+        margin-left: 14rpx;
+        margin-top: 2rpx;
+      }
+    }
 
-        .state {
-            padding: 0rpx 30rpx;
-            text-align: center;
+    .state {
+      padding: 0rpx 30rpx;
+      text-align: center;
 
-            .stateImg {
-                width: 46rpx;
-                height: 40rpx;
-            }
+      .stateImg {
+        width: 46rpx;
+        height: 40rpx;
+      }
 
-            .stateText {
-                color: #686868;
-                font-size: 20rpx;
-            }
-        }
+      .stateText {
+        color: #686868;
+        font-size: 20rpx;
+      }
     }
+  }
 }

pages/follow/index.wxml

@@ -1,4 +1,9 @@
 <view class="followBox">
+  <view class="screening">
+    <view class="type {{currentType==1?'currentType':''}}" data-type="1" bindtap="setType">相互关注</view>
+    <view class="type {{currentType==2?'currentType':''}}" data-type="2" bindtap="setType">我的关注</view>
+    <view class="type {{currentType==3?'currentType':''}}" data-type="3" bindtap="setType">我的粉丝</view>
+  </view>
   <view class="follow" wx:for="{{ list }}" wx:key="*this">
     <view class="userInfo">
       <view class='avatar'>
@@ -14,5 +19,5 @@
       <view class="stateText">{{ item.isEachOther?'互相关注':'已关注' }}</view>
     </view>
   </view>
-  <emptyBg wx:if="{{list.length==0}}" message='您还没有关注哦'></emptyBg>
+  <!--   <emptyBg wx:if="{{list.length==0}}" message='您还没有关注哦'></emptyBg> -->
 </view>

pages/follow/index.wxss

@@ -1,7 +1,24 @@
 .followBox {
   padding: 0rpx 20rpx 20rpx;
 }
+.followBox .screening {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 0rpx 64rpx;
+  box-sizing: border-box;
+}
+.followBox .screening .type {
+  color: #666;
+  font-size: 26rpx;
+}
+.followBox .screening .currentType {
+  color: #333;
+  font-weight: bold;
+  font-size: 34rpx;
+}
 .followBox .follow {
+  margin-top: 40rpx;
   box-sizing: border-box;
   width: 100%;
   background-color: white;