小程序通讯录查询实现-CSDN博客

本文链接：https://blog.csdn.net/yiting123456789/article/details/78274080

本文介绍了如何使用小程序实现通讯录查询功能。首先获取后台数据，然后处理数据将联系人姓名首字转为拼音首字母并排序。在wxml、wxss和js中分别负责结构、样式和逻辑。在实现过程中，特别注意了外部js的引用和暴露，以及input重置的处理方法，利用form和button完成重置操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

实现效果图

思路

拿到后台数据。
eg：
cardArr :[ { name: 'aaa' }, { name: '艾伦' }, { name: '2爱妻' }, { name: 'bc' }, { name: '吧呀' }, { name: '笔试' }, { name: 'cda' }, { name: 'ddd' }, { name: '办办' }, { name: '艾伦' }, { name: '2爱妻' }, { name: 'bc' }, { name: '吧呀' }, { name: '笔试' }, { name: 'cda' }, { name: 'ddd' }, { name: '办办' }, { name: '1艾伦' }, { name: '2爱妻' }, { name: '1111' }, { name: '2222' }, { name: 'bc' }, { name: '吧呀' }, { name: '笔试' }, { name: 'cda' }, { name: 'ddd' }, { name: '办办' }, ],

2.对数据进行处理。拿到name的第一个字，转换为对应的拼音首字母（大写），按照字母顺序进行排序。
3.渲染

实现

wxml

<!--cardList.wxml-->
<view>
    <!-- 搜索框 -->
    <view class="top-search">
        <form>
            <view class="input-box ">
                <input class="inp" type="text" placeholder="请输入联系人姓名" confirm-type="search" bindinput="bindKeyInput"></input>
                <icon class="search-icon" type="search" size="20"/> 
                <image class="scan-add" src="/image/card.png"></image>
            </view>
            <button hidden="{
   
   {
   
   isInputing}}" class="add-card">
                <image class="add-img" src="/image/add_icon.png"> </image>
            </button>
            <button formType="reset" hidden="{
   
   {!isInputing}}" class="add-card cancel-search" bindtap="cancelSearch">取消</button> 
        </form>
    </view>

    <view wx:if="{
   
   {
   
   searchKey}}"></view> 
    <!-- 主要内容 -->
    <scroll-view class="scroll-con" scroll-y scroll-top="{
   
   {
   
   scrollTop}}" bindscroll="scroll">
        <view wx:for="{
   
   {
   
   scrollList}}" wx:key="*this" id="view_{
   
   {
   
   item}}">
            <view class="item-title" >{
   
   {
   
   cardObj[item].title}}</view>
            <view class="card-li" wx:for="{
   
   {
   
   cardObj[item].list}}" wx:key="index" hidden="{
   
   {
   
   item.ishidden}}">
                <image src="/image/nav_center.png" class="card-avatar"></image>
                <view class="info-box">
                    <view class="info-top">
                        <text class="big-name">{
   
   {
   
   item.name}}</text>
                        <text>销售部经理</text>
                    </view>
                    <view class="info-company">
                        xxx有限公司
                    </view>
                </view>
                <view class="call-box">
                    <image src="/image/makecall.png"></image>
                </view>
            </view>
        </view> 
    </scroll-view>
    <!-- 侧边字母  -->
    <view class="side-az">
        <image src="/image/card_search.png"></image>
        <view class="scroll-btn-group" >
            <view wx:for="{
   
   {
   
   scrollList}}" wx:key="*this" data-key="{
   
   {
   
   item}}" bindtap="handleScrollView"><text>{
   
   {
   
   cardObj[item].title}}</text></view>  
        </view>
    </view>

</view>

wxss

/* cardList.wxss */
text,view,swiper,icon,
button,checkbox-group,checkbox,
input,label,picker,radio-group,radio,slider,switch,textarea,
navigator,image,video,audio,map{
    box-sizing: border-box;
}
.card-search{
    position:relative;
    height:60rpx;
    line-height:60rpx;
    background:#f5f5f5;
    padding:20rpx;
    margin:2rpx 0;

}
.search-icon{
    position: absolute;
    top: 50%;
    left: 20rpx;
    margin-top: -22rpx;
}
.scan-add{
    position: absolute;
    top: 50%;
    right: 12rpx;
    margin-top: -22rpx;
    width: 50rpx;
    height: 50rpx;
}
.search-input{
    display: inline-block;
    width: 505rpx;
    height: 60rpx;
    background: #fff;
    border-radius: 4rpx;
    font-size: 28rpx;
    padding-left: 78rpx;
}

.scroll-con{
    height: 1106rpx;
}

.card-retrieval{
  position: fixed;
  right: 40rpx;
  height: 100%;
  padding-top: 10%;
  padding-bottom: 10px;
  width: 25rpx;
}
.card-az{
  text-align: center;
  font-size: 25rpx;
}

page{ height: 100%;}  
.content{
  padding-bottom: 20rpx;
   box-sizing: border-box;
    height: 100%;
    }  
.location{
  width: 100%;
  }  
.location_top{
  height: 76rpx;
  line-height: 76rpx;
   background: #f4f4f4;
   color: #606660;
   font-size: 28rpx;
   padding: 0 20rpx;
   }  
.location_bottom{
  height: 140rpx;
  line-height: 140rpx;
  color: #d91f16;
  font-size: 28rpx;
  border-top: 2rpx #ebebeb solid;
   border-bottom: 2rpx #ebebeb solid;
   padding: 0 20rpx; 
   align-items: center;
   display: -webkit-flex;
   }  
.address_top{