微信小程序自定义类似微信联系人组件

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

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

微信小程序自定义类似微信联系人组件相关推荐

微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
微信小程序实现类似微信评论区回复组件(mpx)
mpx开发微信小程序实现回复组件效果组件内容: <template><view class="apply-component"><van-popu ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
c语言微信小程序编程,微信小程序实现类似微信点击语音播放效果
本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等: 小程序对于aud ...
微信小程序，类似微信点击语音播放效果，不会互相干扰播放状态
类似平常微信语音聊天的效果- 根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等: 小程序对于audio的组件的一些api方法已经不支持了,详情可以参看:微信小程序audio组 ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
微信小程序自定义状态栏navigationBar样式组件，适配所有机型
一.在app.json设置navigationStyle自定义 "window": {"navigationStyle": "custom" ...
微信小程序自定义图片上传组件
实现功能: 点击上传按钮可上传图片,并且可定义最多可上传的图片数量.限制图片的大小.类型和来源. 点击图片可预览图片. 点击删除按钮可删除图片. <!-- image-upload.wxml - ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...

微信小程序自定义类似微信联系人组件

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

微信小程序自定义类似微信联系人组件相关推荐

最新文章

热门文章