效果圖
小程序雲開發分頁加載代碼
<!--pages/chatList/chatList.wxml-->
<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 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>
js
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()
}
})
wxss
/* pages/chatList/chatList.wxss */
page {
/* background-color: white; */
}
.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;
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: 320rpx; */
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;
}