仿微信通讯录功能实现
右侧一个定位锚点跳转功能。
整体是列表的数据显示。
需要图片资源的请去网盘下载 提取码：en17
1.phone.wxml
<!-- pages/phone/phone.wxml -->
<scroll-view scroll-into-view="{{toView}}" scroll-y="true" class="vh">
<!-- menu -->
<view class="box" wx:for="{{topArr}}" id="top">
<view class="box-tx" style="{{item.backG}}">
<image src="{{item.imgs}}" />
</view>
<view class="box-text {{index===(topArr.length-1)?'bnone':'box-text'}}">{{item.text}}</view>
</view>
<!-- friend -->
<view class="friend" wx:for="{{communicationList}}" wx:for-item="big">
<view class="letter-title" id="{{big.title}}">
{{big.title=='xb'?'星标朋友':big.title=='qt'?'#':big.title}}
</view>
<view class="box" wx:for="{{big.list}}" wx:for-item="listitem" wx:for-index="listindex" bind:tap="details" data-t="{{listitem.id}}">
<view>
<image class="box-tx" src="{{listitem.img}}" />
</view>
<view class="box-text {{listindex==(big.list.length-1)?'bnone':'box-text'}}">{{listitem.name}}</view>
</view>
</view>
<!-- contactnum -->
<view class="contactnum">{{contactnum}}位联系人</view>
</scroll-view>
<!-- nav -->
<view class="nav">
<view wx:for="{{rightNavigationBar}}" bindtap="jumpTo" data-opt="{{item=='↑'?'top':item=='☆'?'xb':item=='#'?'qt':item}}" class="nav-text">
{{item}}
</view>
</view>
2.phone.js
// pages/phone/phone.js
Page({
details:function(e){
var id=e.currentTarget.dataset.t;
// console.log(e)
wx.navigateTo({
url: '/pages/PersonalDetails/PersonalDetails?id='+id
})
},
/**
* 页面的初始数据
*/
data: {
topArr: [
{
backG: "background-color:#FA9E3B;",
imgs: "/image/phone/添加好友.png",
text: "新的朋友"
},
{
backG: "background-color: #03C15C",
imgs: "/image/phone/群聊.png",
text: "群聊"
},
{
backG: "background-color: #2182DB",
imgs: "/image/phone/标签.png",
text: "标签"
},
{
backG: "background-color: #2182DB",
imgs: "/image/phone/公众号.png",
text: "公众号"
}
],
communicationList: [
{
title: 'xb',
list: [
{
id:"xb-0",
img: '../../image/1.jpg',
name: '张三',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:"xb-1",
img: '../../image/10.png',
name: '李四',
age: 19,
gender:'female',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'A',
list: [
{
id:"A-0",
img: '../../image/2.jpg',
name: 'A-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:"A-1",
img: '../../image/9.png',
name: 'A-赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:"A-2",
img: '../../image/6.png',
name: '阿肝',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'B',
list: [
{
id:"B-0",
img: '../../image/3.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:"B-1",
img: '../../image/8.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
}
,
{
title: 'C',
list: [
{
id:"C-0",
img: '../../image/4.jpg',
name: 'C-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:"C-1",
img: '../../image/7.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:"C-2",
img: '../../image/8.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'D',
list: [
{
id:"D-0",
img: '../../image/5.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:"D-1",
img: '../../image/5.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'E',
list: [
{
id:'E-0',
img: '../../image/4.jpg',
name: 'E-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'E-1',
img: '../../image/1.jpg',
name: '张三',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'E-2',
img: '../../image/10.png',
name: '李四',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'F',
list: [
{
id:'F-0',
img: '../../image/2.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'F-1',
img: '../../image/9.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'G',
list: [
{
id:'G-0',
img: '../../image/4.jpg',
name: 'G-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'G-1',
img: '../../image/3.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'G-2',
img: '../../image/8.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
}
,
{
title: 'H',
list: [
{
id:'H-0',
img: '../../image/4.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'H-1',
img: '../../image/7.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'I',
list: [
{
id:'I-0',
img: '../../image/4.jpg',
name: 'I-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'I-1',
img: '../../image/5.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'I-2',
img: '../../image/5.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'J',
list: [
{
id:'J-0',
img: '../../image/1.jpg',
name: '张三',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'J-1',
img: '../../image/10.png',
name: '李四',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'K',
list: [
{
id:'K-0',
img: '../../image/4.jpg',
name: 'K-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'K-1',
img: '../../image/2.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'K-2',
img: '../../image/9.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'L',
list: [
{
id:'L-0',
img: '../../image/3.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'L-1',
img: '../../image/8.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
}
,
{
title: 'M',
list: [
{
id:'M-0',
img: '../../image/4.jpg',
name: 'M-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'M-1',
img: '../../image/4.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'M-2',
img: '../../image/7.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'N',
list: [
{
id:'N-0',
img: '../../image/5.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'N-1',
img: '../../image/5.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'O',
list: [
{
id:'O-0',
img: '../../image/4.jpg',
name: 'O-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'O-1',
img: '../../image/1.jpg',
name: '张三',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'O-2',
img: '../../image/10.png',
name: '李四',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'P',
list: [
{
id:'P-0',
img: '../../image/2.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'P-1',
img: '../../image/9.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'Q',
list: [
{
id:'Q-0',
img: '../../image/4.jpg',
name: 'Q-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'Q-1',
img: '../../image/3.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'Q-2',
img: '../../image/8.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
}
,
{
title: 'R',
list: [
{
id:'R-0',
img: '../../image/4.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'R-1',
img: '../../image/7.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'S',
list: [
{
id:'S-0',
img: '../../image/4.jpg',
name: 'S-====-',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'S-1',
img: '../../image/5.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'S-2',
img: '../../image/5.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'T',
list: [
{
id:'T-0',
img: '../../image/3.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'T-1',
img: '../../image/8.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
}
,
{
title: 'U',
list: [
{
id:'U-0',
img: '../../image/4.jpg',
name: 'U-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'U-1',
img: '../../image/4.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'U-2',
img: '../../image/7.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'V',
list: [
{
id:'V-0',
img: '../../image/5.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'V-1',
img: '../../image/5.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'W',
list: [
{
id:'W-0',
img: '../../image/4.jpg',
name: 'W-王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'W-1',
img: '../../image/1.jpg',
name: '张三',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'W-2',
img: '../../image/10.png',
name: '李四',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'X',
list: [
{
id:'X-0',
img: '../../image/2.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'X-1',
img: '../../image/9.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'Y',
list: [
{
id:'Y-0',
img: '../../image/4.jpg',
name: 'Y-七七',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'Y-1',
img: '../../image/3.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'Y-2',
img: '../../image/8.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
}
,
{
title: 'Z',
list: [
{
id:'Z-0',
img: '../../image/4.jpg',
name: '王五',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'Z-1',
img: '../../image/7.png',
name: '赵6',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
},
{
title: 'qt',
list: [
{
id:'qt-0',
img: '../../image/1.jpg',
name: '8066',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'qt-1',
img: '../../image/2.jpg',
name: '#()*',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'qt-2',
img: '../../image/1.jpg',
name: '3255',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
},
{
id:'qt-3',
img: '../../image/2.jpg',
name: '(----)',
age: 19,
gender:'male',
wechatname: "座又杨威:",
address:"上海",
wcnum:'456123sdda',
circle:[
'/image/1.jpg',
'/image/2.jpg',
'/image/3.jpg'
]
}
]
}
],
rightNavigationBar: [
"↑",
"☆",
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
"#"
],
toView: ""
},
jumpTo:function(e){
// console.log(e)
let target=e.currentTarget.dataset.opt;
this.setData({
toView:target
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 计算联系人
var listcount=this.data.communicationList;
var count=0;
for(let i=1;i<listcount.length;i++)
{
for(let j=0;j<listcount[i].list.length;j++)
{
count++;
}
}
this.setData({
contactnum:count
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
wx.showTabBarRedDot({
index: 0
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
最后页面的css样式
3.phone.wxss
/* pages/phone/phone.wxss */
.box{
width: 100%;
height: 120rpx;
margin: 0rpx 0rpx 0rpx 30rpx;
display: flex;
align-items: center;
}
.box-tx{
width: 80rpx;
height: 80rpx;
border-radius: 8%;
display: flex;
justify-content: center;
align-items: center;
}
.box-tx image{
width: 40rpx;
height: 40rpx;
}
.box .box-text{
height: 100%;
width: 590rpx;
font-size: 30rpx;
line-height: 120rpx;
margin-left: 30rpx;
border-bottom: 1rpx solid #ededed;
}
.box .bnone{
border: none;
}
.friend{
border: 1rpx solid #EDEDED;
}
.letter-title{
width: 100%;
height: 60rpx;
background-color: #EDEDED;
padding-left: 32rpx;
font-size: 26rpx;
color: #696969;
line-height: 60rpx;
}
.nav{
position: absolute;
top: 8%;
right: 0;
width: 60rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nav .nav-text{
font-size: 25rpx;
}
.vh{
position: relative;
height: 100vh;
}
.contactnum{
width: 100%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
color: #808080;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
