微信小程序选择客户字母顺序排列页面设计制作开发教程

本文给大家带来的是微信小程序选择客户字母顺序排列页面设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/wineProcess/chooseCustomer.wxml-->
<!--pages/customer/customer.wxml-->

<view class="flex box">
  <scroll-view class="flex groups box box-tb"  style="height:{{windowHeight}}px;" scroll-y="true" scroll-into-view="{{scrollIntoView}}">
   <view class="search-box">
      <view class="addcustomer" bindtap="addcustomer">新增客户</view>
      <view class="searchcustomer" bindtap="showSearch"> <icon type="search" size="15" class="searchicon"/> <text class="font-color-d2d2d2">搜索</text></view>
    </view>
   <navigator url="chooseAddress?type=edit&id={{myuser.id}}" class="user box box-lr bg-color-white" hover-class="navigator-hover">
            <view class="user-avatar box box-lr box-pack-center box-align-center">
              <view class="myuser-avatar-img font-color-white" >{{myuser.firstname}}</view>
            </view>
            <view class="flex user-name">{{myuser.name}}<text class="font-size-999" style="margin-left:1em">{{myuser.nickname}}     </text></view>
   </navigator>
    <block wx:for="{{groups}}" wx:for-item="group" wx:key="groupName">
      <view class="flex" id="{{group.groupName}}">
        <view class="group-name">{{group.groupName}}</view>
        <view class="flex group-users">
          <navigator url="chooseAddress?type=edit&id={{user.id}}" wx:for="{{group.users}}" wx:for-item="user" class="user box box-lr" hover-class="navigator-hover">
            <view class="user-avatar box box-lr box-pack-center box-align-center">
              <view class="user-avatar-img font-color-white" >{{user.firstname}}</view>
            </view>
            <view class="flex user-name">{{user.name}}</view>
          </navigator>
        </view>
      </view>
    </block>
  </scroll-view>
  <view class="nav box box-tb" bindtouchmove="touchmove" bindtouchcancel="touchcancel" bindtouchend="touchend">
    <view bindtap="tabLetter" data-index="{{item}}" wx:for="{{letters}}" class="flex box box-align-center box-pack-center letter" wx:key="item">
      <text class="letter-text {{selected == item ? 'letter-actived' : ''}}">{{item}}</text>
    </view>
  </view>
  
</view>

<view class="mask" wx:if="{{searchstatus}}"></view>
<view class="search-page" wx:if="{{searchstatus}}">
 <scroll-view class="flex groups box box-tb" style="height:{{windowHeight}}px;" scroll-y="true">
    <view class="page__bd">
        <view class="weui-search-bar">
            <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" />
                    <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="weui-cells searchbar-result" wx:if="{{inputValGroup.length > 0}}">
           <navigator wx:for="{{inputValGroup}}" wx:for-item="user" url="chooseAddress?type=edit&id={{user.id}}"  wx:for-index="idx" class="user box box-lr" hover-class="navigator-hover">
            <view class="user-avatar box box-lr box-pack-center box-align-center">
              <view class="user-avatar-img font-color-white" >{{user.firstname}}</view>
            </view>
            <view class="flex user-name">{{user.name}}</view>
          </navigator>
        </view>
        
    </view>
     </scroll-view>
</view>

二、wxss样式文件代码如下：

/* pages/wineProcess/chooseCustomer.wxss */
@import '/pages/customer/customer.wxss';

三、js页面代码如下：

// pages/wineProcess/chooseCustomer.js
import pinyin from '../../utils/getabc';
console.log(pinyin)
Page({
   data: {
    // 当前选择的导航字母
    selected: 0,
    // 选择字母视图滚动的位置id
    scrollIntoView: null,
    // 导航字母
    letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
      'U', 'V', 'W', 'X', 'Y', 'Z'
    ],
    groups: [],
    searchstatus:false,
    inputShowed: false,
    inputVal: "",      //搜索框里面的内容
    inputValGroup:[],  //符合搜索框内容的联系人
    lettersPosition:null
  },
  onLoad: function (options) {
     const res = wx.getSystemInfoSync(),
      letters = this.data.letters;
    
    // 设备信息
    this.setData({
      windowHeight: res.windowHeight,
      windowWidth: res.windowWidth,
      pixelRatio: res.pixelRatio,
    });
    //获取自己的信息
    wx.getUserInfo({
      success: (res)=> {
        let nickName = res.userInfo.nickName
        this.setData({
          myuser:{
            name:'懂你',
            firstname:'懂你'.substr(0,1),
            nickname:nickName,
          }
        })
      }
    })
    // 第一个字母距离顶部高度，css中定义nav高度为94%，所以 *0.94
    const navHeight = this.data.windowHeight * 0.94, // 
      eachLetterHeight = navHeight / 26,
      comTop = (this.data.windowHeight - navHeight) / 2,
      temp = [];
    this.setData({
      eachLetterHeight: eachLetterHeight
    });
    // 求各字母距离设备左上角所处位置
    for (let i = 0, len = letters.length; i < len; i++) {
      const x = this.data.windowWidth - (10 + 50) / this.data.pixelRatio,
        y = comTop + (i * eachLetterHeight);
      temp.push([x, y]);
    }
     
    //获得客户信息
    // app.tools.get('/seller/allcustomer', (data) => {
    let data={
        list: [
      {
        "id": 2719,
        "name": "1号"
      },
      {
        "id": 2716,
        "name": "1号"
      },
      {
        "id": 2717,
        "name": "2号"
      },
      {
        "id": 2529,
        "name": "啊连"
      },
      {
        "id": 2533,
        "name": "啊连"
      },
      {
        "id": 2532,
        "name": "啊连"
      },
      {
        "id": 2531,
        "name": "啊连"
      },
      {
        "id": 2530,
        "name": "啊连"
      },
      {
        "id": 2964,
        "name": "冰岛"
      },
      {
        "id": 2629,
        "name": "测试1"
      },
      {
        "id": 2630,
        "name": "测试2"
      },
      {
        "id": 2633,
        "name": "陈"
      },
      {
        "id": 2635,
        "name": "陈顺刚"
      },
      {
        "id": 2879,
        "name": "陈顺刚"
      },
      {
        "id": 2956,
        "name": "陈文虎"
      },
      {
        "id": 2443,
        "name": "董理"
      },
      {
        "id": 2947,
        "name": "懂你"
      },
      {
        "id": 2660,
        "name": "哈哈"
      },
      {
        "id": 2718,
        "name": "娇"
      },
      {
        "id": 2720,
        "name": "舅舅"
      },
      {
        "id": 2518,
        "name": "李某"
      },
      {
        "id": 2445,
        "name": "刘长顺"
      },
      {
        "id": 2895,
        "name": "刘国梁"
      },
      {
        "id": 2705,
        "name": "刘某某"
      },
      {
        "id": 2526,
        "name": "吴二"
      },
      {
        "id": 2537,
        "name": "袁娇"
      },
      {
        "id": 2520,
        "name": "张三"
      },
      {
        "id": 2939,
        "name": "张三三"
      },
      {
        "id": 2519,
        "name": "张胜武"
      }
    ]
      }
      wx.setStorageSync('customer', data.list);
      const groups = [];
      for (let n = 0; n < letters.length; n++) {
        let obj = {};
        obj.groupName = letters[n];
        obj.users = [];
        for (let i = 0; i < data.list.length; i++) {
          let first = pinyin.getCamelChars(data.list[i].name).substr(0, 1);
          let firstname = data.list[i].name.substr(0, 1);
          if (first == letters[n]) {
            obj.users.push({name:data.list[i].name,firstname:firstname,id:data.list[i].id});
          }
        }
        if (obj.users.length > 0) groups.push(obj);
      }

      this.setData({
        lettersPosition: temp,
        groups: groups
      })
      console.log(this.data.groups);
      console.log(this.data.lettersPosition);
  },
 
  tabLetter(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      selected: index,
      scrollIntoView: index
    })

    this.cleanAcitvedStatus();
  },
  // 清除字母选中状态
  cleanAcitvedStatus() {
    setTimeout(() => {
      this.setData({
        selected: 0
      })
    }, 500);
  },
  touchmove(e) {
    const x = e.touches[0].clientX,
      y = e.touches[0].clientY,
      lettersPosition = this.data.lettersPosition,
      eachLetterHeight = this.data.eachLetterHeight,
      letters = this.data.letters;
    console.log(y);
    // 判断触摸点是否在字母导航栏上
    if (x >= lettersPosition[0][0]) {
      for (let i = 0, len = lettersPosition.length; i < len; i++) {
        // 判断落在哪个字母区域，取出对应字母所在数组的索引，根据索引更新selected及scroll-into-view的值
        const _y = lettersPosition[i][1], // 单个字母所处高度
          __y = _y + eachLetterHeight; // 单个字母最大高度取值范围
        if (y >= _y && y <= __y) {
          this.setData({
            selected: letters[i],
            scrollIntoView: letters[i]
          });
          break;
        }
      }
    }
  },
  touchend(e) {
    this.cleanAcitvedStatus();
  },
   showInput: function () {
        this.setData({
            inputShowed: true
        });
    },
    hideInput: function () {
        this.setData({
            inputVal: "",
            inputShowed: false,
            searchstatus:false,
        });
    },
    clearInput: function () {
        this.setData({
            inputVal: "",
            inputValGroup:''
        });

    },
    inputTyping: function (e) {
        let inputValGroup=[];
        for(let group of this.data.groups){
           for (let user of group.users ){
             //es6    判断是包含字符串  返回   Boolean 类型
              if(user.name.includes(e.detail.value) && e.detail.value){
                    inputValGroup.push(user);
                    console.log(user)
              }
              
           }
        }
         this.setData({
            inputVal: e.detail.value,
            inputValGroup:inputValGroup
        });

    },
    showSearch(e){
      //console.log(11)
        this.setData({
            searchstatus:true,
            inputShowed: true,
        })
    },
    addcustomer(e){
      wx.navigateTo({
        url: 'customerDetail?type=add'
      })
    }
})

模板简介：该模板名称为【微信小程序选择客户字母顺序排列页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。