小程序模仿通讯录制作
前几天模仿通讯录做了一个组件
首先他是分为三个部分，一部分是右边的定位按钮，一部分是受控的左边内容，还有一部分就是顶部固定导航。该组件主要用了scrool-view及其一些方法。
在list.wxml里面，使用的scrool-view组件，通过该组件的scroll-into-view来实现点击右侧按钮左侧内容做到跳转锚点，scroll-with-animation="true"来实现滑动的效果，bindscroll来实现华东左侧内容右侧高亮的效果
{{group.region}}
{{item.name}}
{{fixedTitle}}
#
{{item.region}}
然后在list.js里面：
首先要对数据进行处理，最好就是处理成这种格式：
[
{
id: "1", region: "A",
items: [
{ id: "..", name: "阿明" },
{ id: "..", name: "奥特曼" },
{ id: "..", name: "安庆" },
{ id: "..", name: "阿曼" }
]
},
{
id: "2", region: "B",
items: [
{ id: "..", name: "爸爸" },
{ id: "..", name: "北京" }
]
},
]//对数据进行处理
getBrands:function(){
var that=this;
wx.request({
url: '获取列表数据地址',
success(res) {
if(res.data.status==0){
var someTtitle = null;
var someArr=[];
for(var i=0;i然后就是要计算每个分组的高度， 用于后面滚动判断高亮，以及固定导航分类的赋值
//计算分组高度,用于之后滚动时判断使用,wx.createSelectotQuery()获取节点信息
var that=this;
var number=0;
for (let i = 0; i < that.data.listMain.length; ++i) {
wx.createSelectorQuery().select('#inToView'that.data.listMain[i].id).
boundingClientRect(function (rect) {
number = rect.height + number;
var newArry = [{ 'height': number, 'key': rect.dataset.id, "name": that.data.listMain[i].region}]
that.setData({
oHeight: that.data.oHeight.concat(newArry)
})
}).exec();
};
废话不多，直接上整体代码
Page({
/**
* 页面的初始数据
*/
data: {
isActive:null,
listMain:[],
listTitles: [],
fixedTitle:null,
toView: 'inToView0',
oHeight:[],
scroolHeight:0
},
//点击右侧字母导航定位触发
scrollToViewFn: function (e) {
var that=this;
var _id = e.target.dataset.id;
for (var i = 0; i < that.data.listMain.length; ++i) {
if (that.data.listMain[i].id === _id) {
that.setData({
isActive:_id,
toView: 'inToView' + _id
})
break
}
}
},
toBottom:function(e){
console.log(e)
},
// 页面滑动时触发
onPageScroll:function(e){
this.setData({
scroolHeight: e.detail.scrollTop
});
for (let i in this.data.oHeight){
if (e.detail.scrollTop < this.data.oHeight[i].height){
this.setData({
isActive: this.data.oHeight[i].key,
fixedTitle:this.data.oHeight[i].name
});
return false;
}
}
},
// 处理数据格式，及获取分组高度
getBrands:function(){
var that=this;
wx.request({
url: '获取数据地址',
success(res) {
if(res.data.status==0){
var someTtitle = null;
var someArr=[];
for(var i=0;icss代码
/* pages/list/list.wxss */
page{ height: 100%;}
.content{padding-bottom: 20rpx; box-sizing: border-box; height: 100%;position: fixed}
.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{height: 56rpx;line-height: 56rpx; background: #EBEBEB;color: #999999;font-size: 28rpx;padding: 0 20rpx;}
.address_bottom{height: 88rpx;line-height: 88rpx; background: #fff;color: #000000;font-size: 28rpx;padding: 0 20rpx; border-bottom: 2rpx #ebebeb solid;margin-left: 15rpx; }
.location_img{width: 48rpx;height: 48rpx;position: absolute;right: 20rpx;top: 125rpx;}
.add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #ebebeb; color: #000000;margin-right: 20rpx; }
.add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;}
.orientation{white-space:normal;display: inline-block; width: 45rpx;height:50rpx;font-size: 28rpx;font-weight: bold; color: rgb(88, 87, 87); text-align: center;}
.orientation_region{padding: 5px 0px; width: 45rpx;font-size: 20rpx;position: fixed;top: 50%;right: 6rpx;transform:translate(0,-50%);background: rgb(199, 198, 198);border-radius: 10px}
.orientation_city{height: 40rpx; line-height: 40rpx;color: #000;text-align: center;}
.active{color: #2cc1d1;}
.list-fixed{position: fixed;width: 100%;z-index: 999; height: 56rpx;line-height: 56rpx; background: #EBEBEB;color: #999999;font-size: 28rpx;padding: 0 20rpx;z-index: 9999;}
.fixed-title{color:#2cc1d1}