微信小程序 模仿通讯录

小程序 通讯录效果图

三个主要部分 ： 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();

}})

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,884评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,347评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,435评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,509评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,611评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,837评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,987评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,730评论 0赞 267
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,194评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,334评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,944评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2赞 349

推荐阅读更多精彩内容