样式集（六）仿微信通讯录样式

效果图：

这里有引用到 自定义底部导航，自定义底部导航组件链接

<!--pages/chatList/chatList.wxml--><!-- <include src="/components/common/common" /> -->
<view class="top"><view class="pageTitle">通讯录</view><view class=" search_arr"><icon class="searchcion" catchtap="searchcion" size='16' type='search'></icon><input class="" bindinput="input_p" placeholder="请输入关键字" value="{{searchValue}}" /></view>
</view><view class="user_list" wx:if='{{list.length>0}}'><view wx:for='{{list}}' wx:key="index" class="item p_r" catchtap="nav_chat" data-item="{{item}}"><image class="head" catchtap="previewImage" data-img="{{item.shanghu?item.b_img:item.a_img}}" src="{{item.shanghu?item.b_img:item.a_img}}"></image><view class="num" wx:if='{{item.shanghu&&item.a_unreadMsgNum>0}}'>{{item.a_unreadMsgNum}}</view><view class="num" wx:if='{{!item.shanghu&&item.b_unreadMsgNum>0}}'>{{item.b_unreadMsgNum}}</view><view class="loc">{{item.shanghu?item.b_loc:item.a_loc}}</view><view class="userName"><view>{{item.shanghu?item.b_name:item.a_name}}</view><view class="chatTxt">{{item.msgList.length>0?item.msgList[item.msgList.length-1].txt:''}}<text class="date">{{item.date}}</text></view></view></view>
</view>
<view wx:if='{{list.length==0}}' class="no_msg">您还没有私聊好友</view><view class="tab_num" wx:if='{{tab_num>0}}'>{{tab_num}}</view>
<my_tab></my_tab>

const db = wx.cloud.database()
const _ = db.command;
var app =getApp();
var that = "";function compare(prop) {return function (obj1, obj2) {var val1 = obj1[prop];var val2 = obj2[prop];if (val1 < val2) {return -1;} else if (val1 > val2) {return 1;} else {return 0;}}
}
// 数组去重
function arrayUnique2(arr, name) {var hash = {};return arr.reduce(function (item, next) {hash[next[name]] ? '' : hash[next[name]] = true && item.push(next);return item;}, []);
}
Page({data: {isEndOfList: false,is_guanfang: false,list: [],connectemoji: ['😊', '😅', '😲', '😭', '😂', '😄', '😩', '😞', '😵', '😒', '😍','😤', '😜', '😝', '😋', '😘', '😚', '😷', '😳', '😃', '😆', '😁', '😢', '😨','😠', '😣', '😌', '😖', '😔', '😰', '😱', '😪', '😏', '😓', '👍', '👎', '🔥', '🌹', '[發]', '❔', '🤝'],emoji_list: ['emoji1i1', 'emoji2i2', 'emoji3i3', 'emoji4i4', 'emoji5i5', 'emoji6i6', 'emoji7i7', 'emoji8i8', 'emoji9i9', 'emoji10i10', 'emoji11i11', 'emoji12i12', 'emoji13i13', 'emoji14i14', 'emoji15i15', 'emoji16i16', 'emoji17i17', 'emoji18i18', 'emoji19i19', 'emoji20i20', 'emoji21i21', 'emoji22i22', 'emoji23i23', 'emoji24i24', 'emoji25i25', 'emoji26i26', 'emoji27i27', 'emoji28i28', 'emoji29i29', 'emoji30i30', 'emoji31i31', 'emoji32i32', 'emoji33i33', 'emoji34i34', 'emoji35i35', 'emoji36i36', 'emoji37i37', 'emoji38i38', 'emoji39i39', 'emoji40i40', 'emoji41i41'],limit: 20 //每次拉取数量},previewImage: function (e) {console.log(e.currentTarget.dataset.img)wx.previewImage({current: e.currentTarget.dataset.img, // 当前显示图片的http链接 urls: [e.currentTarget.dataset.img] // 需要预览的图片http链接列表 })},onUnload: function (options) {getApp().page.onUnload(this);},getArr() {// console.log('=========')wx.cloud.callFunction({name: 'getFriends', // 对应云函数名data: {},success: res => {// console.log('-------',res)var list = res.result.data;list = arrayUnique2(list, '_id')// console.log('list2222222',list)var arr = list.sort(compare("newTime")).reverse()var tab_num = 0;arr.forEach(item => {// if(item.a_unreadMsgNum>0){//   tab_num= tab_num + item.a_unreadMsgNum// }if (item.b_unreadMsgNum > 0) {tab_num = tab_num + item.b_unreadMsgNum}})for (var i = 0; i < arr[0].msgList.length; i++) {for (let j = 0; j < that.data.connectemoji.length; j++) {try {arr[0].msgList[i].txt = arr[0].msgList[i].txt.replace(new RegExp(that.data.emoji_list[j], 'g'), that.data.connectemoji[j])} catch (ere) {}}}if (tab_num > that.data.tab_num) {getApp().paly()}this.setData({tab_num,list: arr,isEndOfList: true}, () => {setTimeout(() => {this.getArr()}, 3000);})}})},add_guanfang() {returnvar store = wx.getStorageSync('STORE')var my = wx.getStorageSync('USER_INFO')var date = new Date().getTime()let data = {a: "154",a_img: store.service,a_name: '家居博览会',a_loc: store.address || '石家庄',b: my.id,b_img: my.avatar_url,b_name: my.nickname,date,msgList: []}getApp().DB.collection('friends').add({data: data,success: function (res) {console.log('添加官方为好友--------', res, data)res.data.forEach(item => {if (item.a == wx.getStorageSync('mch_id')) {item.shanghu = true}})that.setData({list: [...that.data.list, ...res.data], //合并数据isEndOfList: true,is_guanfang: true})}})},getTAB: function () {console.log('监听')if (!wx.getStorageSync('USER_INFO')) return;var whereData = {}if (wx.getStorageSync('mch_id')) {whereData = [{a: wx.getStorageSync('mch_id') + ''},{b: wx.getStorageSync('USER_INFO').id}]} else {whereData = [{b: wx.getStorageSync('USER_INFO').id}]}getApp().DB.collection('friends').where(_.or(whereData)).watch({onChange: function (res) {// console.log('监听函数', res.docs)res.data = res.docs;if (!res.data || res.data.length == 0) {return}res.data.forEach(item => {if (item.a == wx.getStorageSync('mch_id')) {item.shanghu = true}})var list = res.data;// var list = [...that.data.list, ...res.data];list = arrayUnique2(list, '_id').reverse()var arr = list.sort(compare("newTime")).reverse()var tab_num = 0;arr.forEach(item => {if (item.shanghu && item.a_unreadMsgNum > 0) {tab_num = tab_num + item.a_unreadMsgNum}if (!item.shanghu && item.b_unreadMsgNum > 0) {tab_num = tab_num + item.b_unreadMsgNum}})for (var i = 0; i < arr[0].msgList.length; i++) {for (let j = 0; j < that.data.connectemoji.length; j++) {try {arr[0].msgList[i].txt = arr[0].msgList[i].txt.replace(new RegExp(that.data.emoji_list[j], 'g'), that.data.connectemoji[j])} catch (ere) {}}}// console.log('list11111111', list)if (tab_num > that.data.tab_num) {getApp().paly()}that.setData({tab_num,list: arr, //合并数据})},onError: function (err) {console.error('----------------error', err)}})},getData: function () {console.log('----------', wx.getStorageSync('mch_id'), wx.getStorageSync('USER_INFO').id)if (wx.getStorageSync('mch_id')) {console.log('----------222', wx.getStorageSync('mch_id'), wx.getStorageSync('USER_INFO').id)getApp().DB.collection('friends').where(_.or([{a: wx.getStorageSync('mch_id') + ''},{b: wx.getStorageSync('USER_INFO').id}])).get()// db.collection("friends")//   .where({_id: _.neq(1)})//   .skip(this.data.list.length)//   .limit(this.data.limit)//   .get().then(res => {console.log('我的好友', res.data)if (res.data.length == 0) {return}res.data.forEach(item => {if (item.a == wx.getStorageSync('mch_id')) {item.shanghu = true}})var list = [...this.data.list, ...res.data];list = arrayUnique2(list, '_id')var arr = list.sort(compare("newTime")).reverse()var tab_num = 0;arr.forEach(item => {//2.if包含数字，判断数据长度是否为11if (app.getNum(item.naa_nameme).length == 11) {//3.截取所有数字，并用*替换4，4var phNum = app.getNum(item.a_name);var phnumAfter = phNum.substr(0, 9) + "**";// phnumAfter = phNum.substr(0,3) + "****" + phNum.substr(7);//4.替换输出item.a_name = item.a_name.replace(phNum, phnumAfter);console.log('结果', item.a_name) //结果 为sd135****9471中}console.log('list2222222', item)if (item.shanghu && item.a_unreadMsgNum > 0) {tab_num = tab_num + item.a_unreadMsgNum}if (!item.shanghu && item.b_unreadMsgNum > 0) {tab_num = tab_num + item.b_unreadMsgNum}})for (var i = 0; i < arr[0].msgList.length; i++) {for (let j = 0; j < that.data.connectemoji.length; j++) {try {arr[0].msgList[i].txt = arr[0].msgList[i].txt.replace(new RegExp(that.data.emoji_list[j], 'g'), that.data.connectemoji[j])} catch (ere) {}}}if (tab_num > that.data.tab_num) {getApp().paly()}this.setData({tab_num,list: arr, //合并数据isEndOfList: res.data.length < this.data.limit ? true : false //判断是否结束})})} else {if (!wx.getStorageSync('USER_INFO')) {return}getApp().DB.collection('friends').where({b: wx.getStorageSync('USER_INFO').id}).get()// db.collection("friends")//   .where({_id: _.neq(1)})//   .skip(this.data.list.length)//   .limit(this.data.limit)//   .get().then(res => {console.log('我的好友', res.data)if (res.data.length == 0) {return}res.data.forEach(item => {if (item.a == wx.getStorageSync('mch_id')) {item.shanghu = true}})var list = [...this.data.list, ...res.data];list = arrayUnique2(list, '_id')this.setData({list: list, //合并数据isEndOfList: res.data.length < this.data.limit ? true : false //判断是否结束})})}},input_p(e) {console.log(e.detail.value)this.setData({inputVal: e.detail.value})},searchcion() {console.log('搜索', this.data.inputVal)if (this.data.inputVal) {var that = thisconst db = wx.cloud.database()const scol = db.collection("friends")scol.where({a_name: {$regex: '.*' + this.data.inputVal + '.*',$options: '1'}}).get({success: res => {console.log('匹配', res)if (res.data.length == 0) {wx.showModal({title: '提示',content: '抱歉，找不到该用户',showCancel: false,success: function (res) {}})return;} else {that.setData({list: res.data})}}})}},nav_chat(e) {var item = e.currentTarget.dataset.item;wx.setStorageSync('chat_item', item)wx.navigateTo({url: '../chat/chat',})},onShow() {wx.setStorageSync('myTab', 2)this.getTAB()},onLoad: function (options) {that = thisgetApp().page.onLoad(this, options);if (options.chat_id) {getApp().DB.collection('friends').doc(options.chat_id).get().then(res => {console.log('========', res.data)wx.setStorageSync('chat_item', res.data)wx.navigateTo({url: '/pages/chat/chat'})})return}if (wx.getStorageSync('USER_INFO') && wx.getStorageSync('USER_INFO').id == 162) {this.getArr()} else {this.getData()}},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;color: black;font-size: 36rpx;background-color: #EDEDED;
}.searchcion {margin: 16rpx 10rpx 10rpx 10rpx;position: absolute;right: 15rpx;z-index: 992;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;
}.num {position: absolute;top: 4rpx;left: 100rpx;width: 40rpx;height: 40rpx;line-height: 40rpx;font-size: 26rpx;background-color: red;color: white;text-align: center;border-radius: 50%;
}.user_list {position: relative;top: 140rpx;padding: 20rpx 0 20rpx;background-color: white;padding-bottom: 100rpx;
}.chatTxt {font-size: 26rpx;color: #999;
}.date {margin-left: 40rpx;
}.userName {margin-left: 20rpx;border-bottom: 0.5rpx solid #f3f3f3;width: 62%;color: black;font-weight: normal;font-size: 32rpx;margin-top: 12rpx;padding-bottom: 10rpx;}.no_msg {position: absolute;top: 500rpx;text-align: center;width: 100%;}.loc {position: absolute;right: 40rpx;max-width: 200rpx;top: 40rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}

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