樣式集（六）仿微信通訊錄樣式

效果圖：

這裏有引用到 自定義底部導航，自定義底部導航組件鏈接

<!--pages/chatList/chatList.wxml-->
<view class="top">
	<view class="pageTitle">家博慧</view>
	<view class=" search_arr">
		<icon class="searchcion" size='16' type='search'></icon>
		<input class="" bindinput="input_p" placeholder="請輸入關鍵字" value="{{searchValue}}" />
	</view>
</view>

<view class="user_list">
	<view wx:for='{{list}}' wx:key="" class="item p_r">
		<image class="head" src="{{item.yun_file_id_arr[0]}}"></image>
		<view class="loc">{{item.weizhi}}</view>
		<view class="userName">{{item.name}}</view>
	</view>
</view>

<my_tab></my_tab>

const db = wx.cloud.database()
const _ = db.command
const col = "chat_user"
const sql = {
  _id: _.neq(1)
} //獲取所有記錄

Page({

  data: {
    isEndOfList: false,
    list: [],
    limit: 20 //每次拉取數量
  },

  onLoad: function(options) {
    this.getData()
  },

  getData: function() {
    db.collection(col)
      .where(sql)
      .skip(this.data.list.length)
      .limit(this.data.limit)
      .get()
      .then(res => {
        this.setData({
          list: [...this.data.list, ...res.data], //合併數據
          isEndOfList: res.data.length < this.data.limit ? true : false //判斷是否結束
        })
      })
  },

  onReachBottom: function() {
    !this.data.isEndOfList && this.getData()
  }
})

/* pages/chatList/chatList.wxss */
page {
  background-color: #EDEDED;
}
.top{
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  background-color: #EDEDED;
}
.pageTitle {
  padding-top: 60rpx;
  padding-left: 20rpx;
  height: 140rpx;
  background-color: #EDEDED;
}

.searchcion {
  margin: 16rpx 10rpx 10rpx 10rpx;
  position: absolute;
  right: 15rpx;
  z-index: 2;
  width: 20px;
  height: 20px;
  text-align: center;
}

.search_arr {
  border: 1px solid #d0d0d0;
  background-color: #EDEDED;
  border-radius: 50rpx;
  margin-left: 30rpx;
  position: fixed;
  width: 40%;
  top: 54rpx;
  left: 200rpx;
}

.search_arr input {
  margin-left: 20rpx;
  height: 60rpx;
  border-radius: 5px;
}
swiper{
  position: fixed;
  width: 100%;
}
.swiper-item{
  width: 100%;
  height: 300rpx;
}
.item{
  position: relative;
  margin-bottom: 20rpx;
}
.head{
  width: 90rpx;
  height: 90rpx;
  border-radius: 10rpx;
  margin: 16rpx;
}
.user_list{
  position: relative;
  top: 140rpx;
  padding: 20rpx 0 20rpx;
  background-color: white;
}
.userName{
  margin-left: 20rpx;
  border-bottom: 1rpx solid #d0d0d0;
  width: 82%;
  font-weight: normal;
  font-size: 32rpx;
  margin-top: 32rpx;
  padding-bottom: 10rpx;
}
.loc{
position: absolute;
right: 40rpx;
top: 40rpx;
}

{
  "navigationStyle": "custom",
  "usingComponents": {
    "my_tab": "../Component/my_tab"
  }
}