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


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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
Nuxt.js实战详解
Jan 18 Javascript
vue mounted组件的使用
Jun 18 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
layui实现数据表格点击搜索功能
Mar 26 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
分享下php5类中三种数据类型的区别
2015/01/26 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
python使用Tesseract库识别验证
2018/03/21 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Django缓存系统实现过程解析
2019/08/02 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
给老师的道歉信
2014/01/11 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
应届生求职信范文
2014/05/26 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
SQL Server中的游标介绍
2022/05/20 SQL Server