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


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 相关文章推荐
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
axios学习教程全攻略
Mar 26 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
js实现九宫格布局效果
May 28 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
关于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
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
PHP分享图片的生成方法
2018/04/25 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
python读取LMDB中图像的方法
2018/07/02 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python selenium firefox使用详解
2019/02/26 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Python中的Cookie模块如何使用
2020/06/04 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
护士实习生自我鉴定范文
2013/12/10 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
函授本科自我鉴定
2014/02/04 职场文书
保险公司晨会主持词
2014/03/22 职场文书
大学校务公开实施方案
2014/03/31 职场文书
电工技术比武方案
2014/05/11 职场文书
小区推广策划方案
2014/06/06 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
python中%格式表达式实例用法
2021/06/18 Python
Python Matplotlib绘制条形图的全过程
2021/10/24 Python