微信小程序自定義聯(lián)系人彈窗
微信小程序自定義類似微信聯(lián)系人組件,供大家參考,具體內(nèi)容如下
在小程序項(xiàng)目中需要有一個(gè)選擇人員項(xiàng),想著看著好看一些,所以做成類似微信聯(lián)系人的界面,由于本人是后端人員,效果不是特別好看,ui使用的是weui
效果圖如下:
使用的是小程序自定義組件,自定義組件同樣需要有js、wxss、json、wxml四個(gè)文件,
如何使自定義的組件,需要在json文件中聲明
{ "component": true }
js文件中使用的Component構(gòu)造器而不是Pge構(gòu)造器,其中properties屬性中聲明組件中對(duì)外暴露的屬性,該組件中暴漏了兩個(gè)屬性:
show:布爾值,控制聯(lián)系人組件是否顯示,
list:數(shù)組,聯(lián)系人組件需要顯示的人員,效果圖左側(cè)的字母導(dǎo)航欄組件中已經(jīng)處理過了,基本漢字處理沒有問題,會(huì)根據(jù)對(duì)象中name屬性提取首字母,將數(shù)組進(jìn)行排序分組,只需要傳入原生數(shù)組即可
數(shù)組的是多個(gè)Object對(duì)象,該對(duì)象需必備兩個(gè)屬性:
{ name: "火男", //聯(lián)系人顯示的名稱 photo: "http://aaa/img.png"http://聯(lián)系人的頭像,如果不指定,會(huì)使用默認(rèn)的圖片 }
組件通信,設(shè)置三個(gè)事件回調(diào)函數(shù)
cancle: 組件上方搜索欄取消按鈕回調(diào)
select:選中某個(gè)聯(lián)系人后的回調(diào),會(huì)將選中的人員對(duì)象發(fā)送到父組件中
confirmInput:上方搜索框鍵盤按下完成后的回調(diào),會(huì)將輸入框中的值發(fā)送到父組件中
使用方法:
在組件標(biāo)簽中使用bindselect="",bindconfirmInput="",bindcancle=""綁定父組件中的回調(diào)
js文件:
var pinyin = require('./pinyin.js') Component({ /** * 組件的屬性列表 */ properties: { //是否顯示聯(lián)系人 show: { type: Boolean, value: false }, //用戶數(shù)組 list: { type: Array, value: [] } }, /** * 組件的初始數(shù)據(jù) */ data: { nav: [], showList: [] }, observers: { 'list': function(list) { console.log('更新人員數(shù)據(jù):', 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: { // 生命周期函數(shù),可以為函數(shù),或一個(gè)在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 }); }, //輸入框點(diǎn)擊取消按鈕 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 }) }, //選中某個(gè)聯(lián)系人 select(e) { console.log("選中聯(lián)系人",e) var myEventDetail = {} // detail對(duì)象,提供給事件監(jiān)聽函數(shù) myEventDetail['user'] = e.currentTarget.dataset.user; var myEventOption = {} // 觸發(fā)事件的選項(xiàng) this.setData({ show: false }) this.triggerEvent('select', myEventDetail, myEventOption) }, //點(diǎn)擊完成按鈕 confirmInput: function (e) { console.log('點(diǎn)擊鍵盤完成', e) var myEventDetail = {}//提供給事件監(jiān)聽函數(shù) 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>
到此聯(lián)系人組件完成
完整版deomo演示代碼地址
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崙?zhàn)之自定義模態(tài)彈窗(8)
- 微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法
- 微信小程序?qū)崿F(xiàn)自定義picker選擇器彈窗內(nèi)容
- 微信小程序常用的3種提示彈窗實(shí)現(xiàn)詳解
- 微信小程序?qū)崿F(xiàn)漂亮的彈窗效果
- 微信小程序 彈窗自定義實(shí)例代碼
- 微信小程序自定義彈窗實(shí)現(xiàn)詳解(可通用)
- 微信小程序用戶授權(quán)彈窗 拒絕時(shí)引導(dǎo)用戶重新授權(quán)實(shí)現(xiàn)
- 微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼
- 微信小程序日歷彈窗選擇器代碼實(shí)例
相關(guān)文章
js中 計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s中 計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08eCharts圖表實(shí)現(xiàn)扇形和折線圖代碼示例
本文概述了前端和后端實(shí)現(xiàn)數(shù)據(jù)可視化圖表的步驟,前端部分涉及引入文件、設(shè)置盒子、發(fā)送請(qǐng)求等,最終通過ECharts初始化圖形,后端則包括定義VO類、處理mapper和業(yè)務(wù)邏輯等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09javascript通過元素id和name直接取得元素的方法
這篇文章主要介紹了javascript通過元素id和name直接取得元素的方法,涉及javascript獲取元素的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
昨天群里面的朋友問了個(gè)比較有意思的問題,keydown,keyup,keypress事件的先后順序。2009-02-02JavaScript(JS) 壓縮 / 混淆 / 格式化 批處理工具
本工具所有的功能實(shí)現(xiàn)都是由 ttp://jscompress.sinaapp.com/api 處理.(包括現(xiàn)在可以使用的這個(gè)在線壓縮)2010-12-12游戲開發(fā)中如何使用CocosCreator進(jìn)行音效處理
這篇文章主要介紹了游戲開發(fā)中如何使用CocosCreator進(jìn)行音效處理,并對(duì)音效組件進(jìn)行封裝,方便以后使用,同學(xué)們看完之后,一定要親手實(shí)驗(yàn)一下2021-04-04js中各種數(shù)據(jù)類型檢測(cè)和判定的實(shí)戰(zhàn)示例
typeof一般被用于判斷一個(gè)變量的類型,我們可以利用typeof來判斷number,string,object,boolean,function,undefined,symbol這七種類型,下面這篇文章主要給大家介紹了關(guān)于js中各種數(shù)據(jù)類型檢測(cè)和判定的相關(guān)資料,需要的朋友可以參考下2022-11-11Firefox+FireBug使JQuery的學(xué)習(xí)更加輕松愉快
FireBug是FireFox下最強(qiáng)大的調(diào)試插件.利用它,可以讓JQuery的學(xué)習(xí)過程更加輕松愉快.2010-01-01