微信小程序 模仿通讯录

小程序 通讯录效果图

三个主要部分 ： 1）右侧定位导航   2)左侧内容部分   3)顶部固定导航

wxml 部分

<view>

<!-- 左侧列表内容部分 -->

<scroll-view class="contentList" enable-back-to-top scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="onPageScroll">

    <view wx:for="{{listMain}}" wx:for-item="group" wx:key="{{group.id}}" id="{{ 'inTo'+group.id}}" data-id='{{group.id}}'>

        <view class="address_top">{{group.region}}</view>

        <view wx:for="{{group.items}}" wx:for-item="item" wx:key="{{item.brandId}}">

                <view class="address_bottom" data-id='{{item.brandId}}'>{{item.name}}</view>

        </view>

    </view>

</scroll-view>

<!-- 顶部固定分类 -->

<view class="list-fixed {{fixedTitle==null ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);">

    <view class="fixed-title"> {{fixedTitle}} </view>

</view>

<!-- 右侧字母导航 -->

<view class="orientation_region">

    <view class="orientation">#</view>

    <block wx:for="{{listMain}}" wx:key="{{item.id}}">

        <view class="orientation_city {{isActive==item.id ? 'active':'' }}" bindtap="scrollToViewFn" data-id="{{item.id}}">

                {{item.region}}

        </view>

    </block>

</view>

</view>

wxss

page {

    height: 100%; 

}

.search {

    display: flex;

    position: relative;

    padding: 20rpx 30rpx;

    background: #fff;

}

.search .input-wrapper {

    background: #f2f2f2;

    width: 80%;

    display: flex;

    height: 68rpx;

    border-radius: 68rpx;

    position: relative;

}

.search .input-wrapper input {

    height: 68rpx;

    width: calc(100% - 84rpx);

    margin-left: 20rpx;

}

.search .input-wrapper .searchImg {

    width: 32rpx;

    height: 32rpx;

    margin-left: 32rpx;

    position: relative;

    top: 50%;

    margin-top: -18rpx;

}

.search .input-wrapper .delImg {

    width: 32rpx;

    height: 32rpx;

    position: relative;

    top: 50%;

    margin-top: -16rpx;

    right: 32rpx;

    vertical-align: top;

}

.search .searchBtn {

    color: #348efa;

    width: 20%;

    text-align: center;

    line-height: 68rpx;

    font-size: 36rpx;

}

.currentCity {

    padding: 20rpx 30rpx;

}

.currentCity .subTitle {

    font-weight: bold;

    font-size: 28rpx;

}

.currentCity .city {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 10rpx 40rpx;

    border-radius: 8rpx;

    margin-top: 20rpx;

}

.currentCity .city image {

    width: 26rpx;

    height: 32rpx;

    vertical-align: top;

}

.hotCity {

    padding: 0 80rpx 0 30rpx;

}

.hotCity .subTitle {

    font-weight: bold;

}

.hotCity .content {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}

.hotCity .content {

    margin-top: 20rpx;

}

.hotCity .content .unit {

    width: 30%;

    border: 1px solid#CCCCCC;

    text-align: center;

    border-radius: 8rpx;

    padding: 10rpx 0;

    margin-bottom: 20rpx;

}

.allCity { height:50px; line-height: 50px; padding: 0 30rpx; font-weight: bold; font-size: 30rpx;}

.contentList { padding-bottom: 20rpx; box-sizing: border-box; height: 100%; bottom: 0; position: absolute;}

.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: 36px; line-height: 36px; background: #f5f5f5; color:rgba(153,153,153,1); font-size: 28rpx; padding: 0 20rpx;}

.address_bottom { height: 88rpx; line-height: 88rpx; background: #fff; color: #000; 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: #000; 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: absolute; width: 100%; z-index: 999; height: 36px; line-height: 36px; background: #ebebeb; color: #999; font-size: 28rpx; padding: 0 20rpx;}

.fixed-title { color: #2cc1d1;}.hide{ display: none;}

Page({

/** * 页面的初始数据 */

data: {

    isActive: null,

    listMain: [{ id: "1", region: "A", items: [{ id: "..", name: "阿明" }, { id: "..", name: "阿乐" }, { id: "..", name: "奥特曼" }, { id: "..", name: "安庆" } ] }, { id: "2", region: "B", items: [{ id: "..", name: "爸爸" }, { id: "..", name: "八仔" } ] }, { id: "3", region: "C", items: [{ id: "..", name: "车仔面" }, { id: "..", name: "吃货" }, { id: "..", name: "蠢货" } ] }, { id: "4", region: "D", items: [{ id: "..", name: "担担面" }, { id: "..", name: "刀仔" }, { id: "..", name: "兑兑" } ] }, { id: "5", region: "E", items: [{ id: "..", name: "担担面" }, { id: "..", name: "刀" }, { id: "..", name: "对对" } ] }, { id: "6", region: "F", items: [{ id: "..", name: "冯洁" }, { id: "..", name: "峰仔" }, { id: "..", name: "凤姐" } ] }, ],

    fixedTitle: null,

    toView: 'inTo0',

    oHeight: [],

    scroolHeight: 0,

    fixedTop: 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: 'inTo' + _id, fixedTitle: that.data.listMain[i].region

        })

        break;

}

} }, 

// 页面滑动时触发

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; var number = 0

//计算分组高度,wx.createSelectotQuery()获取节点信息

for (let i = 0; i < that.data.listMain.length; ++i) {

    wx.createSelectorQuery().select('#inTo' + 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(); }; },

onLoad: function(options) {

    var that = this;

    that.getBrands();

}})