微信小程序实现通讯录列表展开收起


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序实现通讯录列表展开收起的具体代码,供大家参考,具体内容如下

效果图:

微信小程序实现通讯录列表展开收起

微信小程序实现通讯录列表展开收起

wxml:

<view class="mail_content kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
 <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
 <view>
 <view class="mail_content_list" wx:for="{{item.emplist}}" wx:key="{{index}}" wx:for-item="emplist">
 <view class="mail_content_item flex_align_c">
 <image class="mail_content_item_img" src="../../img/headpic.jpg" wx:if="{{emplist.headpic}}"></image>
 <view class="mail_content_item_img" wx:else>{{emplist.empstr}}</view>
 <view class="mail_content_item_info full">
  <view class="mail_content_item_info_name">{{emplist.empname}}</view>
  <view class="flex margin_top_10">
  <view class="mail_content_item_info_depart">{{emplist.part_name}}</view>
  <view class="mail_content_item_info_post">{{emplist.zhiwu}}</view>
  </view>
 </view>
 <van-icon name="phone-o" class="flex_align_c" color="#9FC1F3" size="30px" bind:click="viewClick01" data-phonenum="{{emplist.phone}}" />
 </view>
 </view>
 </view>
 </view>
</view>

js:

data:{
list:[{"id":"1","partname":"系统超管","open":"0","subpart":[],"emplist":[]},{"id":"2","partname":"总经办","open":"0","subpart":[],"emplist":[{"empid":"10081","headpic":"","phone":"18092000580","empname":"李","zhiwu":"总经理","emppartid":"|76|","empcode":"001","part_name":"总经办","empstr":"李"},{"empid":"10163","headpic":"","phone":"13100000000","empname":"销呗助理","zhiwu":"销呗助理","emppartid":"|76|","empcode":"010","part_name":"总经办","empstr":"销"}]},{"id":"3","partname":"财务部","open":"0","subpart":[],"emplist":[]},{"id":"4","partname":"销售部","open":"0","subpart":[{"id":"106","partname":"销售一部","subpart":[],"emplist":[{"empid":"10085","headpic":"","phone":"17502996271","empname":"钟","zhiwu":"业务员","emppartid":"|78|81|","empcode":"005","part_name":"销售一部","empstr":"钟"}]},{"id":"107","partname":"销售二部","subpart":[],"emplist":[{"empid":"10162","headpic":"","phone":"18370152646","empname":"孔","zhiwu":"技术","emppartid":"|78|107|","empcode":"009","part_name":"销售二部","empstr":"孔"}]}],"emplist":[{"empid":"10082","headpic":"","phone":"15349238580","empname":"陈","zhiwu":"财务总监","emppartid":"|78|","empcode":"002","part_name":"销售部","empstr":"陈"}]},{"id":"5","partname":"策划部","open":"0","subpart":[],"emplist":[]},{"id":"6","partname":"技术部","open":"0","subpart":[],"emplist":[{"empid":"10083","headpic":"","phone":"13759945868","empname":"肖","zhiwu":"技术经理","emppartid":"|80|","empcode":"003","part_name":"技术部","empstr":"肖"},{"empid":"10088","headpic":"","phone":"15609291904","empname":"李","zhiwu":"前端","emppartid":"|80|","empcode":"008","part_name":"技术部","empstr":"李"}]}]
},
 /**
 * 收缩核心代码
 */
 kindToggle(e) {
 const id = e.currentTarget.dataset.id
 // console.log(id)
 const list = this.data.list
 for (let i in list) {
 if (i == id) {
 list[i].open = !list[i].open
 } else {
 list[i].open = false
 }
 }

 /**
 * key和value名称一样时,可以省略
 * 
 * list:list=>list
 */
 this.setData({
 list
 })
 },

CSS:

.mail_item{
 width: 100%;
 padding: 30rpx 30rpx;
 box-sizing: border-box;
 font-size: 34rpx;
 color: #32363c;
 background: #fff;
}
.jiantou{
 color: #B0B6B8;
 margin-right: 10rpx;
}
.mail_content{
 width: 100%;
 overflow: hidden;
 background: #f2f6fc;
}
.mail_title{
 padding: 20rpx 30rpx;
 box-sizing: border-box;
 font-size: 30rpx;
 color: #b0b6b8;
}
.mail_content_list{
 width: 100%;
}
.mail_content_item{
 padding-left:60rpx;
 box-sizing: border-box;
 padding-right: 30rpx;
 background: #fff;
}
.mail_content_item_img{
 width: 90rpx;
 height: 90rpx;
 border-radius: 50%;
 background: #4877bd;
 color: #fff;
 font-size: 36rpx;
 font-weight: 900;
 display: flex;
 align-items: center;
 justify-content: center;
}
.mail_content_item_info{
 padding: 20rpx 0;
 box-sizing: border-box;
 margin-left: 20rpx;
 border-bottom: 1rpx solid rgba(123,126,128,0.15);
}
.mail_content_item_info_name{
 font-size: 35rpx;
 color: #32363c;
 font-weight: bold;
}
.mail_content_item_info_depart,.mail_content_item_info_post{
 color: #6c7072;
 font-size: 30rpx;
 margin-right: 23rpx;
}

.navigator-box {
 opacity: 0;
 position: relative;
 line-height: 1.41176471;
 font-size: 34rpx;
 transform: translateY(-50%);
 transition: 0.3s;
}

.navigator-box-show {
 opacity: 1;
 transform: translateY(0);
}

.navigator {
 padding: 20rpx 30rpx;
 position: relative;
 display: flex;
 align-items: center;
}

.navigator:before {
 content: " ";
 position: absolute;
 left: 30rpx;
 top: 0;
 right: 30rpx;
 height: 1px;
 border-top: 1rpx solid #d8d8d8;
 color: #d8d8d8;
}

.navigator:first-child:before {
 display: none;
}

.navigator-text {
 flex: 1;
}

.navigator-arrow {
 padding-right: 26rpx;
 position: relative;
}

.navigator-arrow:after {
 content: " ";
 display: inline-block;
 height: 18rpx;
 width: 18rpx;
 border-width: 2rpx 2rpx 0 0;
 border-color: #888;
 border-style: solid;
 transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
 position: absolute;
 top: 50%;
 margin-top: -8rpx;
 right: 28rpx;
}

.kind-list-item {
 margin: 20rpx 0;
 background-color: #fff;
 border-radius: 4rpx;
 overflow: hidden;
 border-bottom: 1px dashed #888;
}

.kind-list-item:first-child {
 margin-top: 0;
}

.kind-list-text {
 flex: 1;
}

.kind-list-img {
 width: 60rpx;
 height: 60rpx;
}

.kind-list-item-hd {
 padding: 30rpx;
 display: flex;
 align-items: center;
 transition: opacity 0.3s;
}

.kind-list-item-bd {
 height: 0;
 overflow: hidden;
}

.kind-list-item-bd-show {
 height: auto;
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
解决vue移动端适配问题
Dec 12 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 #Javascript
微信小程序实现多行文字滚动
Nov 18 #Javascript
微信小程序实现自定义底部导航
Nov 18 #Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 #Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 #Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 #Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
PHP 日期加减的类,很不错
2009/10/10 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
javascript打印输出json实例
2013/11/11 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
python实现自动发送邮件
2018/06/20 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
使用Python实现批量ping操作方法
2020/05/06 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
如何理解委托
2012/01/06 面试题
自动化专业毕业生自荐信
2013/11/01 职场文书
小学教师岗位职责
2013/11/25 职场文书
法学自荐信
2014/06/20 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript