小程序 通訊錄效果圖
三個(gè)主要部分 ： 1）右側(cè)定位導(dǎo)航? ?2)左側(cè)內(nèi)容部分? ?3)頂部固定導(dǎo)航
wxml 部分
<view>
<!-- 左側(cè)列表內(nèi)容部分 -->
<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>
<!-- 頂部固定分類(lèi) -->
<view class="list-fixed {{fixedTitle==null ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);">
????<view class="fixed-title"> {{fixedTitle}} </view>
</view>
<!-- 右側(cè)字母導(dǎo)航 -->
<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({
/** * 頁(yè)面的初始數(shù)據(jù) */
data: {
????isActive: null,
????listMain: [{ id: "1", region: "A", items: [{ id: "..", name: "阿明" }, { id: "..", name: "阿樂(lè)" }, { id: "..", name: "奧特曼" }, { id: "..", name: "安慶" } ] }, { id: "2", region: "B", items: [{ id: "..", name: "爸爸" }, { id: "..", name: "八仔" } ] }, { id: "3", region: "C", items: [{ id: "..", name: "車(chē)仔面" }, { id: "..", name: "吃貨" }, { id: "..", name: "蠢貨" } ] }, { id: "4", region: "D", items: [{ id: "..", name: "擔(dān)擔(dān)面" }, { id: "..", name: "刀仔" }, { id: "..", name: "兌兌" } ] }, { id: "5", region: "E", items: [{ id: "..", name: "擔(dān)擔(dān)面" }, { id: "..", name: "刀" }, { id: "..", name: "對(duì)對(duì)" } ] }, { id: "6", region: "F", items: [{ id: "..", name: "馮潔" }, { id: "..", name: "峰仔" }, { id: "..", name: "鳳姐" } ] }, ],
????fixedTitle: null,
????toView: 'inTo0',
????oHeight: [],
????scroolHeight: 0,
????fixedTop: 0 },
????//點(diǎn)擊右側(cè)字母導(dǎo)航定位觸發(fā)
????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;
}
} },?
// 頁(yè)面滑動(dòng)時(shí)觸發(fā)
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;
} } },
// 處理數(shù)據(jù)格式鸟辅，及獲取分組高度
getBrands: function() {
????var that = this; var number = 0
//計(jì)算分組高度,wx.createSelectotQuery()獲取節(jié)點(diǎn)信息
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();
}})
