小程序開發(fā)組件的使用:仿微信通訊錄
類似微信通訊錄的形式,要怎么開發(fā)小程序的頁面,下面為大家介紹類似通訊錄的小程序組件樣式
特色功能介紹- 用戶只需按照格式傳入參數,組件能夠自動將參數按首字母分組,簡單方便;
- 組件右側首字母導航無需另外傳值,并且根據參數具體有哪些首字母顯示(沒有的咱就不要);
- 用戶進行上下滑動時,左右相互聯(lián)動;
- 點擊右側導航,組件會相應的上下滾動。
說到滾動當然少不了小程序的基礎組件scroll-view,該組件就是在此基礎上實現的;
監(jiān)聽組件scroll-view的bindscroll事件,進而對組件數據進行操作,即可完成。
- 滾動區(qū)域
<scroll-view scroll-y style="height:100%;white-space:nowrap;" scroll-into-view="{{toView}}" enable-back-to-top bindscroll="scroll" scroll-with-animation scroll-top="{{scrollTop}}"> <view class="list-group" wx:for="{{logs}}" wx:for-item="group"> <view class="title" id="{{group.title}}">{{group.title}}</view> <block wx:for="{{group.items}}" wx:for-item="user"> <view id="" class="list-group-item"> <image class="icon" src="{{user.avatar}}" lazy-load="true"></image> <text class="log-item">{{user.name}}</text> </view> </block> </view> </scroll-view>
簡單說一下上述代碼:根據小程序文檔,在使用scroll-view組件用于豎向滾動時一定要設置高度,你們可以看到我在代碼中設置了'height:100%;'這就實現了組件的滾動高度是整個頁面。
但是請注意:很多同學會發(fā)現設置了高度100%后,組件并沒有效果,這是因為你沒有將頁面高度設置為100%,所以你還需在app.wxss中設置page的高度為100%
其他的屬性看文檔就好,我就不再多說;
2.側邊字母導航
<view class="list-shortcut"> <block wx:for="{{logs}}"> <text class="{{currentIndex===index?'current':''}}" data-id="{{item.title}}" bindtap='scrollToview'>{{item.title}}</text> </block> </view>
3.固定在頂部的字母導航
仔細的同學能發(fā)現在滾動時,頂部有一個固定位置的字母導航,其值對應滾動到的區(qū)域
<view class="list-fixed {{fixedTitle=='' ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);"> <view class="fixed-title"> {{fixedTitle}} </view> </view>Wxss
樣式太簡單了,就不發(fā)了,重點看js部分
js- 拿到參數第一步當然是將參數列表渲染上去啦,
normalizeSinger(list) { //歌手列表渲染 let map = { hot: { title: this.data.HOT_NAME, items: [] } } list.forEach((item, index) => { if (index < this.data.HOT_SINGER_LEN) { map.hot.items.push({ name: item.Fsinger_name, avatar:this.constructor(item.Fsinger_mid) }) } const key = item.Findex if (!map[key]) { map[key] = { title: key, items: [] } } map[key].items.push({ name: item.Fsinger_name, avatar: this.constructor(item.Fsinger_mid) }) }) let ret = [] let hot = [] for (let key in map) { let val = map[key] if (val.title.match(/[a-zA-Z]/)) { ret.push(val) } else if (val.title === this.data.HOT_NAME) { hot.push(val) } } ret.sort((a, b) => { return a.title.charCodeAt(0) - b.title.charCodeAt(0) }) return hot.concat(ret) },
將用戶數據分為兩大塊,即熱門組和不熱門組默認將參數的前10組歸類為熱門組,然后對所以參數安裝首字母進行排序分組。
- 計算各組高度
var lHeight = [], that = this; let height = 0; lHeight.push(height); var query = wx.createSelectorQuery(); query.selectAll('.list-group').boundingClientRect(function(rects){ var rect = rects, len = rect.length; for (let i = 0; i < len; i++) { height += rect[i].height; lHeight.push(height) } }).exec(); var calHeight = setInterval(function(){ if (lHeight != [0]) { that.setData({ listHeight: lHeight }); clearInterval(calHeight); } },1000)
在獲取元素屬性上,小程序提供了一個很方便的api,wx.createSelectotQuery();具體使用方法請看節(jié)點信息API
使用該方法獲取到各分組的高度,存入lHeight中用于之后滾動時判斷使用;
同學們可以看到我在將lHeight賦值給data的listHeight時使用了定時器,這是因為獲取節(jié)點信息api是異步執(zhí)行的,顧你直接進行賦值是沒有效果的,所以我使用了定時器功能;
我覺得這里使用定時器不是最好的處理方式,同學們有更好的方法請告訴我,謝謝
3.第三步就是在滾動的時候獲取滾動高度,相應的處理即可,滾動使用到了scroll-view自帶事件,這個事件會返回滾動的距離,及其方便
const listHeight = this.data.listHeight // 當滾動到頂部,scrollY<0 if (scrollY == 0 || scrollY < 0) { this.setData({ currentIndex:0, fixedTitle:'' }) return } // 在中間部分滾動 for (let i = 0; i < listHeight.length - 1; i++) { let height1 = listHeight[i] let height2 = listHeight[i + 1] if (scrollY >= height1 && scrollY < height2) { this.setData({ currentIndex:i, fixedTitle:this.data.logs[i].title }) this.fixedTt(height2 - newY); return } } // 當滾動到底部,且-scrollY大于最后一個元素的上限 this.setData({ currentIndex: listHeight.length - 2, fixedTitle: this.data.logs[listHeight.length - 2].title })參數格式
list:[ { "index": "X", "name": "薛之謙", }, { "index": "Z", "name": "周杰倫", }, { "index": "B", "name": "BIGBANG (??)", }, { "index": "B", "name": "陳奕迅", }, { "index": "L", "name": "林俊杰", }, { "index": "A", "name": "Alan Walker (艾倫·沃克)", }, ]
如果你們還需要其他的參數,對應的在后面加上即可。
第二部分:如何開通一個小商店