微信小程序自定义联系人弹窗


Posted in Javascript onMay 26, 2020

微信小程序自定义类似微信联系人组件,供大家参考,具体内容如下

在小程序项目中需要有一个选择人员项,想着看着好看一些,所以做成类似微信联系人的界面,由于本人是后端人员,效果不是特别好看,ui使用的是weui

效果图如下:

微信小程序自定义联系人弹窗

使用的是小程序自定义组件,自定义组件同样需要有js、wxss、json、wxml四个文件,
如何使自定义的组件,需要在json文件中声明

{
 "component": true
}

js文件中使用的Component构造器而不是Pge构造器,其中properties属性中声明组件中对外暴露的属性,该组件中暴漏了两个属性:

show:布尔值,控制联系人组件是否显示,
list:数组,联系人组件需要显示的人员,效果图左侧的字母导航栏组件中已经处理过了,基本汉字处理没有问题,会根据对象中name属性提取首字母,将数组进行排序分组,只需要传入原生数组即可

数组的是多个Object对象,该对象需必备两个属性:

{
 name: "火男", //联系人显示的名称
 photo: "http://aaa/img.png"//联系人的头像,如果不指定,会使用默认的图片
}

组件通信,设置三个事件回调函数

cancle: 组件上方搜索栏取消按钮回调
select:选中某个联系人后的回调,会将选中的人员对象发送到父组件中
confirmInput:上方搜索框键盘按下完成后的回调,会将输入框中的值发送到父组件中

使用方法:

在组件标签中使用bindselect="",bindconfirmInput="",bindcancle=""绑定父组件中的回调

js文件:

var pinyin = require('./pinyin.js')

Component({

 /**
 * 组件的属性列表
 */
 properties: {
 //是否显示联系人
 show: {
  type: Boolean,
  value: false
 },
 //用户数组
 list: {
  type: Array,
  value: []
 }
 },

 /**
 * 组件的初始数据
 */
 data: {
 nav: [],
 showList: []
 },
 observers: {
 'list': function(list) {
  console.log('更新人员数据:', list)
  for (let user of list) {
  user['pinyin'] = pinyin.py.get(user.name).p
  if (!Boolean(user.photo)) {
   user['photo'] = "./resources/images/photo-boy.png";
  }
  }

  var newlist = [];
  var nav = [];
  if (this.data.list.length > 0) {
  var sortUsers = pinyin.py.dataLetterSort(this.data.list, 'pinyin')
  for (let key in sortUsers) {
   var obj = {};
   obj['title'] = key,
   obj['list'] = sortUsers[key]
   nav.push(key)
   newlist.push(obj);
  }
  }

  this.setData({
  showList: newlist,
  nav: nav
  })
  console.log(this.data.showList)
 }
 },

 lifetimes: {
 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
 attached() {},
 moved() {},
 detached() {},
 },

 /**
 * 组件的方法列表
 */
 methods: {
 toView: function(e) {
  console.log('toview',e)
  this.setData({
  toViewNav: e.currentTarget.dataset.item,
  toView: e.currentTarget.dataset.item
  })
 },
 showInput: function() {
  this.setData({
  inputShowed: true
  });
 },
 //输入框点击取消按钮
 hideInput: function() {
  this.setData({
  inputVal: "",
  inputShowed: false
  });
  this.triggerEvent('cancle');
 },
 touchend: function() {
  console.log(11111111)
  setTimeout(() => {
  this.setData({
   toViewNav: ""
  })
  }, 500);
  
 },
 
 clearInput: function() {
  this.setData({
  inputVal: ""
  });
 },
 inputTyping: function(e) {
  this.setData({
  inputVal: e.detail.value
  });
 },
 hideUsers: function() {
  this.setData({
  show: false
  })
 },
 //选中某个联系人
 select(e) {
  console.log("选中联系人",e)
  var myEventDetail = {} // detail对象,提供给事件监听函数
  myEventDetail['user'] = e.currentTarget.dataset.user;
  var myEventOption = {} // 触发事件的选项
  this.setData({ show: false })
  this.triggerEvent('select', myEventDetail, myEventOption)
 },
 //点击完成按钮
 confirmInput: function (e) {
  console.log('点击键盘完成', e)
  var myEventDetail = {}//提供给事件监听函数
  myEventDetail['value'] = e.detail.value;
  this.triggerEvent('confirm',myEventDetail)
 }
 }
})

wxml文件

<view class='mask' wx:if="{{show}}">

 <view class="weui-search-bar">
 <view class='return' bindtap='hideUsers'>返回</view>
 <view class="weui-search-bar__form">
  <view class="weui-search-bar__box">
  <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
  <input type="text" class="weui-search-bar__input" placeholder="搜索人名" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindconfirm='confirmInput' />
  <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
   <icon type="clear" size="14"></icon>
  </view>
  </view>
  <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
  <icon class="weui-icon-search" type="search" size="14"></icon>
  <view class="weui-search-bar__text">搜索人名</view>
  </label>
 </view>
 <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
 </view>

 <view class='flex '>
 <scroll-view class="flex1" scroll-y scroll-into-view="{{toView}}" style='height:calc(100vh - 102rpx)'>
  <block wx:for='{{showList}}' wx:key='id'>
  <view class='letter-backgroud'>
   <view class='lh40 fz16 color9e ml10' id='{{item.title}}'>{{item.title}}</view>
  </view>

  <view class='bgf fz14'>
   <view class='flex alic borderbe0 ml10 pt15 pb15' wx:for='{{item.list}}' wx:key='i' wx:for-item='n' data-id='{{item.id}}' data-user="{{n}}" bindtap='select'>
   <image src='{{n.photo}}' class='img mr15'></image>
   <text>{{n.name}}</text>
   <text wx:if='{{n.heart=="1"&&n.cue}}' class='posAbs mr15 r10 colorf0'>{{n.cue}}</text>
   </view>
  </view>
  </block>
 </scroll-view>
 <view class='posFix right0 tc fz12 flex justsa colu' style='top:40%;height:100px;'>
  <view wx:for='{{nav}}' bindtap='toView' data-item='{{item}}' wx:key='a' bindtouchend='touchend'>
  <text class="letter-text {{toViewNav == item ? 'letter-actived' : ''}}">{{item}}</text>
  </view>
 </view>
 </view>
</view>

wxss文件

<view class='mask' wx:if="{{show}}">

 <view class="weui-search-bar">
 <view class='return' bindtap='hideUsers'>返回</view>
 <view class="weui-search-bar__form">
  <view class="weui-search-bar__box">
  <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
  <input type="text" class="weui-search-bar__input" placeholder="搜索人名" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindconfirm='confirmInput' />
  <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
   <icon type="clear" size="14"></icon>
  </view>
  </view>
  <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
  <icon class="weui-icon-search" type="search" size="14"></icon>
  <view class="weui-search-bar__text">搜索人名</view>
  </label>
 </view>
 <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
 </view>

 <view class='flex '>
 <scroll-view class="flex1" scroll-y scroll-into-view="{{toView}}" style='height:calc(100vh - 102rpx)'>
  <block wx:for='{{showList}}' wx:key='id'>
  <view class='letter-backgroud'>
   <view class='lh40 fz16 color9e ml10' id='{{item.title}}'>{{item.title}}</view>
  </view>

  <view class='bgf fz14'>
   <view class='flex alic borderbe0 ml10 pt15 pb15' wx:for='{{item.list}}' wx:key='i' wx:for-item='n' data-id='{{item.id}}' data-user="{{n}}" bindtap='select'>
   <image src='{{n.photo}}' class='img mr15'></image>
   <text>{{n.name}}</text>
   <text wx:if='{{n.heart=="1"&&n.cue}}' class='posAbs mr15 r10 colorf0'>{{n.cue}}</text>
   </view>
  </view>
  </block>
 </scroll-view>
 <view class='posFix right0 tc fz12 flex justsa colu' style='top:40%;height:100px;'>
  <view wx:for='{{nav}}' bindtap='toView' data-item='{{item}}' wx:key='a' bindtouchend='touchend'>
  <text class="letter-text {{toViewNav == item ? 'letter-actived' : ''}}">{{item}}</text>
  </view>
 </view>
 </view>
</view>

到此联系人组件完成

完整版deomo演示代码地址

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

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

Javascript 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
AngularJs 常用的过滤器
May 15 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
微信小程序单选框自定义赋值
May 26 #Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 #Javascript
jQuery弹框插件使用方法详解
May 26 #jQuery
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 #Javascript
微信小程序实现弹框效果
May 26 #Javascript
微信小程序自定义弹出层效果
May 26 #Javascript
详解JSON.stringify()的5个秘密特性
May 26 #Javascript
You might like
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
javascript中常用编程知识
2013/04/08 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
three.js 入门案例详解
2018/01/23 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python MySQLdb使用教程详解
2018/03/20 Python
python基础教程项目三之万能的XML
2018/04/02 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
python实现学生信息管理系统源码
2021/02/22 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
师范应届生语文教师求职信
2013/10/29 职场文书
重阳节登山活动方案
2014/02/03 职场文书
文明寄语大全
2014/04/11 职场文书
二年级小学生评语
2014/04/21 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
办公室日常管理制度
2015/08/04 职场文书
python元组打包和解包过程详解
2021/08/02 Python