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


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 相关文章推荐
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 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
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
Python爬取梨视频的示例
2021/01/29 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
网络教育毕业生自我鉴定
2013/10/10 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
2014年标准化工作总结
2014/12/17 职场文书
公司租车协议书
2015/01/29 职场文书
钱学森电影观后感
2015/06/04 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
mysql如何能有效防止删库跑路
2021/10/05 MySQL
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript