E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

微信小程序自定义联系人弹窗在小程序项目中需要有一个选择人员项,想着看着好看一些,所以做成类似微信联系人的界面,由于本人是后端人员,效果不是特别好看,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).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/viewwxss文件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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序自定义类似微信联系人组件
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏