위 챗 애플 릿 사용자 정의 연락처 창

위 챗 애플 릿 은 위 챗 연락처 와 유사 한 구성 요 소 를 사용자 정의 합 니 다.참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
애플 릿 프로젝트 에서 선택 한 인원 항목 이 필요 합 니 다.보기 좋게 생각 하기 때문에 위 챗 연락처 와 유사 한 화면 을 만 듭 니 다.저 는 백 엔 드 인원 이기 때문에 효과 가 별로 좋 지 않 습 니 다.ui 는 weui 를 사용 합 니 다.
효과 도 는 다음 과 같다.

애플 릿 사용자 정의 구성 요 소 를 사용 합 니 다.사용자 정의 구성 요 소 는 js,wxs,json,wxml 네 개의 파일 이 필요 합 니 다.
사용자 정의 구성 요 소 를 json 파일 에 설명 하 는 방법

{
 "component": true
}

js 파일 에서 사용 하 는 Component 구조 기 는 Pge 구조 기 가 아 닙 니 다.그 중에서 properties 속성 에서 구성 요소 가 외부 에 노출 된 속성 을 설명 합 니 다.이 구성 요소 에서 두 가지 속성 이 누 출 되 었 습 니 다.
show:불 값,연락처 구성 요소 표시 여 부 를 제어 합 니 다.
list:배열,연락처 구성 요소 가 표시 해 야 할 사람,효과 그림 왼쪽 에 있 는 알파벳 네 비게 이 션 표시 줄 구성 요소 에서 처리 되 었 습 니 다.기본 한자 처리 에 문제 가 없습니다.대상 의 name 속성 에 따라 이니셜 을 추출 하고 배열 을 정렬 하여 그룹 을 나 누 며 원생 배열 에 만 전송 하면 됩 니 다.
배열 은 여러 Object 대상 입 니 다.이 대상 은 두 개의 속성 이 필요 합 니 다.

{
 name: "  ", //        
 photo: "http://aaa/img.png"//      ，     ，        
}

구성 요소 통신,세 개의 이벤트 리 셋 함수 설정
cancle:구성 요소 위쪽 검색 표시 줄 취소 단추 리 셋
select:어떤 연락 처 를 선택 한 후의 반전 은 선택 한 인원 대상 을 부모 구성 요소 에 보 냅 니 다.
confirm Input:위쪽 검색 상자 키보드 가 완 료 된 리 셋 을 누 르 면 입력 상자 의 값 을 부모 구성 요소 에 보 냅 니 다.
사용 방법:
구성 요소 탭 에 bindselect=",bindbirmpinput=",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 ? '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>

이 연락처 구성 요소 완료
풀 버 전
현재 관심 도가 높 은 위 챗 애플 릿 튜 토리 얼 을 추천 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.