小程式類通訊錄樣式
阿新 • • 發佈:2018-11-09
先上程式碼
.js
Page({ /** * 頁面的初始資料 */ data: { isActive: null, listMain: [{ id: "1", region: "A", items: [ { id: "", name: "amour" }, { id: "", name: "amour" }, { id: "", name: "amour" }, { id: "", name: "amour" } ] }, { id: "2", region: "B", items: [ { id: "", name: "bandon" }, { id: "", name: "bandon" } ] }, { id: "3", region: "C", items: [ { id: "", name: "client" }, { id: "", name: "client" }, { id: "", name: "client" }, { id: "", name: "client" } ] }, { id: "4", region: "D", items: [ { id: "", name: "digital" }, { id: "", name: "digital" } ] }, { id: "5", region: "E", items: [ { id: "", name: "echo" }, { id: "", name: "echo" }, { id: "", name: "echo" }, { id: "", name: "echo" } ] }, { id: "6", region: "F", items: [ { id: "", name: "funk" }, { id: "", name: "funk" } ] }, ], listTitles: [], fixedTitle: 'A', toView: 'inToView0', viewPosition: [], scroolHeight: 0 }, //頁面載入觸發, 獲取所定義view距離可滾動檢視區域頂部高度 onLoad: function(options){ var that = this ; var num = 0; for (let i = 0; i < that.data.listMain.length;i++){ wx.createSelectorQuery().select('#inToView' + that.data.listMain[i].id).boundingClientRect(function(rect){ num = num + rect.height; //元素高度+該元素先前元素高度 , 可理解為元素底部至可滾動檢視區域頂部高度 console.log(num) var _array = [{ 'height': num, 'key': rect.dataset.id , 'name':that.data.listMain[i].region}]; that.setData ({ viewPosition: that.data.viewPosition.concat(_array) //合併陣列 }); }).exec() }; }, // 可滾動檢視區域滑動函式觸發 onPageScroll: function (e) { console.log(e) this.setData({ scroolHeight: e.detail.scrollTop //獲取滾動條滾動位置 }); for (let i in this.data.viewPosition) { if (e.detail.scrollTop < this.data.viewPosition[i].height) { //判斷滾動條位置是否在元素內 this.setData({ isActive: this.data.viewPosition[i].key, fixedTitle: this.data.viewPosition[i].name }); return false; } } }, //點選右側字母導航定位觸發 scrollToViewFn: function (e) { console.log(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 //滾動條to指定view }) break } } }, })
知識點 :
1、wx.createSelectorQuery() :返回一個SelectorQuery物件例項。可以在這個例項上使用select等方法選擇節點,並使用boundingClientRect等方法選擇需要查詢的資訊。 利用boundingClientRect函式返回height屬性值
2. scrollTop 獲得可滾動檢視區域豎向滾動條位置
3. .wxml用scrool-view元件 , scroll-with-animation=“true” 在設定滾動條位置時使用動畫過渡 ; scroll-y=“true"允許縱向滾動 ; scroll-into-view=”{{toView}}"值應為某子元素id(id不能以數字開頭),設定哪個方向可滾動,則在哪個方向滾動到該元素。
4. 沒了 , 小程式來實現這種效果還是很方便的
.wxml
<view > <!-- 左側列表內容部分 --> <scroll-view class="content" 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="{{ 'inToView'+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=='' ? '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%;}
.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: 32rpx;padding: 0 20rpx; border-bottom: 2rpx #ebebeb solid;margin-left: 20rpx;margin-right: 50rpx; }
.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: 55rpx;height:58rpx; color: #999; text-align: center;}
.orientation_region{ width: 55rpx;font-size: 20rpx;position: fixed;top: 100rpx; right: 0rpx;}
.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;}