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
})
扩展:怎么实现历史查询和热门查询