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


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 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
CocosCreator入门教程之网络通信
Apr 16 Javascript
微信小程序单选框自定义赋值
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
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
php强制下载类型的实现代码
2011/04/21 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
详解PHP中的Traits
2015/07/29 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
js string 转 int 注意的问题小结
2013/08/15 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
python动态加载包的方法小结
2016/04/18 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
基于Python的PIL库学习详解
2019/05/10 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
Laravel中Kafka的使用详解
2021/03/24 PHP
大学生工作推荐信范文
2013/12/02 职场文书
《都江堰》教学反思
2014/02/07 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
办公室禁烟通知
2015/04/23 职场文书
民主生活会主持词
2015/07/01 职场文书
军训通讯稿范文
2015/07/18 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python