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


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实现雪花飘落效果
Aug 26 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
详解JS函数重载
2014/12/04 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
优良学风班申请材料
2014/02/13 职场文书
班级标语大全
2014/06/21 职场文书
银行奉献演讲稿
2014/09/16 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
车间安全生产管理制度
2015/08/06 职场文书
Python Flask实现进度条
2022/05/11 Python