微信小程序自定义类似微信联系人组件，供大家参考，具体内容如下
在小程序项目中需要有一个选择人员项，想着看着好看一些，所以做成类似微信联系人的界面，由于本人是后端人员，效果不是特别好看，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 ">{{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 ">{{item}}</text>
</view>
</view>
</view>
</view>
到此联系人组件完成
完整版deomo演示代码地址
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。