⼩程序⾃定义联系⼈弹窗
⼩程序⾃定义类似联系⼈组件，供⼤家参考，具体内容如下
在⼩程序项⽬中需要有⼀个选择⼈员项，想着看着好看⼀些，所以做成类似联系⼈的界⾯，由于本⼈是后端⼈员，效果不是特别好看，ui 使⽤的是weui
效果图如下：
使⽤的是⼩程序⾃定义组件，⾃定义组件同样需要有js、wxss、json、wxml四个⽂件，
如何使⾃定义的组件，需要在json⽂件中声明
{
"component": true
}
js⽂件中使⽤的Component构造器⽽不是Pge构造器，其中properties属性中声明组件中对外暴露的属性，该组件中暴漏了两个属性：show：布尔值，控制联系⼈组件是否显⽰，
list：数组，联系⼈组件需要显⽰的⼈员，效果图左侧的字母导航栏组件中已经处理过了，基本汉字处理没有问题，会根据对象中name属性提取⾸字母，将数组进⾏排序分组，只需要传⼊原⽣数组即可
数组的是多个Object对象，该对象需必备两个属性：
{
name: "⽕男", //联系⼈显⽰的名称
photo: "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'] = (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
});
},
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 })
},
//点击完成按钮
confirmInput: function (e) {
console.log('点击键盘完成', e)
var myEventDetail = {}//提供给事件监听函数
myEventDetail['value'] = e.detail.value;
}
}
})
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>input标签placeholder属性
<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>
到此联系⼈组件完成
完整版
为⼤家推荐现在关注度⽐较⾼的⼩程序教程⼀篇：⼩编为⼤家精⼼整理的，希望喜欢。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。