欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序自定義聯(lián)系人彈窗

 更新時間：2020年05月26日 14:35:33   作者：dlz_Mr  
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義聯(lián)系人彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

微信小程序自定義類似微信聯(lián)系人組件，供大家參考，具體內(nèi)容如下

在小程序項目中需要有一個選擇人員項，想著看著好看一些，所以做成類似微信聯(lián)系人的界面，由于本人是后端人員，效果不是特別好看，ui使用的是weui

效果圖如下：

使用的是小程序自定義組件，自定義組件同樣需要有js、wxss、json、wxml四個文件，
如何使自定義的組件，需要在json文件中聲明

{
 "component": true
}

js文件中使用的Component構(gòu)造器而不是Pge構(gòu)造器，其中properties屬性中聲明組件中對外暴露的屬性，該組件中暴漏了兩個屬性：

show:布爾值，控制聯(lián)系人組件是否顯示，
list：數(shù)組，聯(lián)系人組件需要顯示的人員，效果圖左側(cè)的字母導(dǎo)航欄組件中已經(jīng)處理過了，基本漢字處理沒有問題，會根據(jù)對象中name屬性提取首字母，將數(shù)組進(jìn)行排序分組，只需要傳入原生數(shù)組即可

數(shù)組的是多個Object對象，該對象需必備兩個屬性：

{
 name: "火男", //聯(lián)系人顯示的名稱
 photo: "http://aaa/img.png"http://聯(lián)系人的頭像，如果不指定，會使用默認(rèn)的圖片
}

組件通信，設(shè)置三個事件回調(diào)函數(shù)

cancle： 組件上方搜索欄取消按鈕回調(diào)
select：選中某個聯(lián)系人后的回調(diào)，會將選中的人員對象發(fā)送到父組件中
confirmInput：上方搜索框鍵盤按下完成后的回調(diào)，會將輸入框中的值發(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ù)，或一個在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
  })
 },
 //選中某個聯(lián)系人
 select(e) {
  console.log("選中聯(lián)系人",e)
  var myEventDetail = {} // detail對象，提供給事件監(jiān)聽函數(shù)
  myEventDetail['user'] = e.currentTarget.dataset.user;
  var myEventOption = {} // 觸發(fā)事件的選項
  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ā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論