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

Habiba ·

更新时间:2024-11-14

· 572 次阅读

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

在小程序项目中需要有一个选择人员项，想着看着好看一些，所以做成类似微信联系人的界面，由于本人是后端人员，效果不是特别好看，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演示代码地址

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

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

1024 个赞