沧州品牌网站建设,开发一款网络游戏需要多少钱,wordpress怎么共享到朋友圈,网上购物网站模板1、背景
大家平时用到微信的时候#xff0c;应该都会用到微信的通讯录功能#xff0c;刚好我们公司项目中也有要实现组织通讯录的需求#xff0c;在次记录下实现过程。
我的实现比较简单#xff0c;目前是没有添加右侧的字母导航模块。
实现效果图如下所示#xff1a; …1、背景
大家平时用到微信的时候应该都会用到微信的通讯录功能刚好我们公司项目中也有要实现组织通讯录的需求在次记录下实现过程。
我的实现比较简单目前是没有添加右侧的字母导航模块。
实现效果图如下所示 分为两部分上面一部分是部门下面部分为当前部门下的员工列表目前做的比较简单仅供大家参考哈。
2、实现
打开微信开发者工具创建项目并且在 app.json 文件中添加 pages/addressbook/addressbook, 如下图所示 2.1、addressbook.js 的实现
// pages/addressbook/addressbook.js
//https://blog.csdn.net/weixin_44039965/article/details/93503931
//https://www.jianshu.com/p/17b339adbe9b
Page({data:{windowHeight: ,deptData:[{deptName:基础研发部},{deptName:设计部},{deptName:测试部},{deptName:质量管理部},{deptName:生产部}],
userData:[
{letter:A, data:[{name:AAA,phoneNum:15771009876,icon:/image/user_icon.png},{name:AAAAAAA,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:B,data:[{name:BBB,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:C,data:[{name:CCC,phoneNum:15771009876,icon:/image/user_icon.png},{name:CCC,phoneNum:15771009876,icon:/image/user_icon.png},{name:CCC,phoneNum:15771009876,icon:/image/user_icon.png},{name:CCC,phoneNum:15771009876,icon:/image/user_icon.png},{name:CCC,phoneNum:15771009876,icon:/image/user_icon.png}]},
{letter:D,data:[{name:DDD,phoneNum:15771009876,icon:/image/user_icon.png}]},
{letter:E,data:[{name:EEE,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:F,data:[{name:FFF,phoneNum:15771009876,icon:/image/user_icon.png}]},
{letter:G,data:[{name:GGG,phoneNum:15771009876,icon:/image/user_icon.png}]},
{letter:H,data:[{name:HHHH,phoneNum:15771009876,icon:/image/user_icon.png}]},
{letter:I,data:[{name:IIIII,phoneNum:15771009876,icon:/image/user_icon.png}]},
{letter:J,data:[{name:JJJ,phoneNum:15771009876,icon:/image/user_icon.png},{name:JJJ,phoneNum:15771009876,icon:/image/user_icon.png},{name:JJJ,phoneNum:15771009876,icon:/image/user_icon.png},{name:JJJ,phoneNum:15771009876,icon:/image/user_icon.png},{name:JJJ,phoneNum:15771009876,icon:/image/user_icon.png},{name:JJJ,phoneNum:15771009876,icon:/image/user_icon.png},{name:JJJ,phoneNum:15771009876,icon:/image/user_icon.png},{name:JJJ,phoneNum:15771009876,icon:/image/user_icon.png}]},
{letter:K,data:[{name:KKK,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:L,data:[{name:LLL,phoneNum:15771009876,icon:/image/user_icon.png},
]},
{letter:M,data:[]},
{letter:N,data:[{name:NNN,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:O,data:[{name:OOO,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:P,data:[{name:PPP,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:Q,data:[{name:QQQ,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:R,data:[{name:RRR,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:S,data:[{name:SSS,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:T,data:[{name:TTT,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:U,data:[{name:UUU,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:V,data:[{name:VVV,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:W,data:[{name:WWW,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:X,data:[]},
{letter:Y,data:[{name:YYY,phoneNum:15771009876,icon:/image/user_icon.png},]},
{letter:Z,data:[]},
]
},onLoad: function (options) {try {var res wx.getSystemInfoSync()this.setData({windowHeight: res.windowHeight px})} catch (e) {console.log(e);}},// 拨打电话给callGetPhone(e) {// 号码let telPhone e.currentTarget.dataset.getphone;if(telPhone null || telPhone ){wx.showToast({title: 电话号码为空!,})return;}wx.showModal({title: 拨打电话,content: telPhone,confirmText: 拨打,success: function (res) {if (res.confirm) {wx.makePhoneCall({phoneNumber: telPhone})}}})},
})
deptData存放的是部门数据 userData存放的是用户数据。
2.2、 addressbook.wxml的实现
!--pages/addressbook/addressbook.wxml--
scroll-view scroll-y styleheight: {{windowHeight}}
view classalphabet
!-- 部门数据列表 --
view classalphabet-listview classsection-itemview wx:for{{deptData}} wx:for-itemdeptItem wx:for-indexidx classsection-item-cellsview classsection-item-cell {{border-bottom}} data-obj{{deptItem}}view classdept-nametext classdept-text{{deptItem.deptName}}/text /view/view/view/view
/view!-- 用户数据列表 --
view classalphabetview classalphabet-listview wx:for{{userData}} wx:keyunique id{{item.letter}} classsection-itemblock wx:if{{item.data.length 0}}view classitem-header{{item.letter}}/viewview wx:for{{item.data}} wx:for-itemcell classsection-item-cellsview classsection-item-cell {{border-bottom}}view classuserListview classflex-wrp-row itemview classitem-left flex-wrp-rowimage classuserIcon src{{cell.icon}} modecover/imagetext classcell-name{{cell.name}}/text/view view classitem-right flex-wrp-rowimage classcallPhone src/image/ic_contact_call.png catchtapcallGetPhone data-getPhone{{cell.phoneNum}}/image/view /view/view/view/view/block/view
/view
/view
/view
/scroll-view 可以看到整个布局时 scroll-view 因为里面的列表数据需要进行滚动另外布局里面的代码也分为两部分 部门数据列表 用户数据列表。
2.3、addressbook.wxss 的实现
/* pages/addressbook/addressbook.wxss */
.dept-name{height: 54rpx;
}.alphabet-list .section-item .section-item-header{display: flex;align-items: center;font-size: 26rpx;font-family: PingFang SC;background-color: #f2f4f5; color: #000000;padding: 4rpx 20rpx;
}.item-header{display: flex;align-items: center;font-size: 16rpx;font-family: PingFang SC;background-color: #f2f4f5; color: #666666;padding: 4rpx 20rpx;
}.alphabet-list .section-item .section-item-cells {padding-left: 20rpx;
}
.alphabet-list .section-item .section-item-cells .section-item-cell{font-size: 26rpx;line-height: 1.0;color: #000000;padding: 29rpx 0;
}.dept-text{font-size: 26rpx;font-family: PingFang SC;color: #000000;line-height: 54rpx;
}.border-bottom {border-bottom: 1rpx solid #dbdbdb;
}.userIcon{width: 33px;height: 33px;
}.callPhone{width: 40rpx;height: 40rpx;margin-right: 50rpx;
}.deptName{margin-left: 16rpx;font-size: 20rpx; font-family: PingFang SC;font-weight: 500;color: #000000;line-height: 54px;
}.userList{display: flex;flex-direction: column;height: 50rpx;
}.cell-name{margin-left: 20rpx;font-size: 28rpx;font-family: PingFang SC;color: #000000;
}.flex-wrp-row {display: flex;flex-direction: row;
}.item {position: relative;
}.item-left {flex: 1; /* 重要 */align-items:center;
}.item-right {position: relative;align-items:center;
}
样式这块就没什么好说的了我也是才学习写的比较简陋。
3、工程图片资源
工程里面用到两个图片资源放置在image文件夹下如下图所示 好了就先到这里如果文章对你有所帮助不要忘记点个赞哟~
