实验三--仿通讯录demo

1.通讯录基础

1）基本布局样式

两个scroll-view 一个是左边的内容区（记得分出第一个是字母）一个是固定在右边的字母顺序表A-Z #

<!--index.wxml-->
<view class="page">
    <view class="content">
        <!-- 左侧内容区 -->
        <scroll-view class="person-list" enable-back-to-top style="height: {{oHeight}}px" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
            <view class="person" wx:for="{{personList}}" wx:key="index" id="{{ 'inToView'+item.id}}">
                <view class="person-sign">{{item.sign}}</view>
                <view class="person-content">
                    <view class="person-cont {{item.name.length > 1 ? 'border' : ''}}" bindtap="choose" data-item="{{it}}" wx:for="{{item.name}}" wx:key="id" wx:for-item="it">
                        <image class="person-head" src="{{it.head_img ? it.head_img : default_img}}"></image>
                        <text class="person-name">{{it.name}}</text>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 左侧字母栏 -->
        <scroll-view class="letter-list">
            <view class="letter" wx:for="{{personList}}" wx:key="index" catchtap="chooseLetter" data-item="{{item}}">{{item.sign}}</view>
        </scroll-view>
    </view>
</view>

利用scroll-into-view属性实现点击右侧字母表后获取点击项下标合成对应区域的类名，从而跳转到对应区域

chooseLetter(e){
        let currentItem = e.currentTarget.dataset.item
        this.data.personList.forEach(item => {
            if (item.sign == currentItem.sign) {
                this.setData({
                    toView: 'inToView' + currentItem.id //滚动条to指定view
                })
            }
        })
    }

2）重点：数据处理

调用写好的方法将数据进行分组，然后对分好组的数据排序（根据标志位进行排序，不在a-z的则是#，放在最后）

2.自定义顶部栏

app.json处

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black",
    "navigationStyle": "custom"
  },

app.js //获取顶部栏信息

App({
  onLaunch: function () {
    // 获取顶部栏信息
    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
    })
  },
  globalData: {
    userInfo: null,
    navHeight: 0
  }
})

在页面的js文件上

const App = getApp();//设立顶部栏高度
onLoad: function () {
      this.setData({
        navH: App.globalData.navHeight
      });
      this.list();
    },

接下来就是利用相对定位和绝对定位进行布局

3.模糊查找功能

遍历数组每一项，用正则匹配，成功则添加到数组展示

var value = e.detail.value;
    var result = [];
    var reg = value;
    if(value != ""){
      for(var i = 0 ; i < list.length ; i++){
        if(list[i].indexOf(reg) >= 0){
          result.push(list[i]);
        }
      }
    }
    this.setData({
      resultList:result
    })

扩展：怎么实现历史查询和热门查询