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

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

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

效果图如下:

微信小程序自定义联系人弹窗_第1张图片

使用的是小程序自定义组件,自定义组件同样需要有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文件



 
 返回
 
  
  
  
  
   
  
  
  
 
 
 

 
 
  
  
   {{item.title}}
  

  
   
   
   {{n.name}}
   {{n.cue}}
   
  
  
 
 
  
  {{item}}
  
 
 

wxss文件



 
 返回
 
  
  
  
  
   
  
  
  
 
 
 

 
 
  
  
   {{item.title}}
  

  
   
   
   {{n.name}}
   {{n.cue}}
   
  
  
 
 
  
  {{item}}
  
 
 

到此联系人组件完成

完整版deomo演示代码地址

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

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

你可能感兴趣的:(微信小程序自定义联系人弹窗)