微信小程序中經(jīng)常用到導(dǎo)航欄的使用，多用于分類(lèi)頁(yè)面，接下來(lái)做的小demo，是可以自適應(yīng)分類(lèi)的數(shù)目以及title長(zhǎng)度的一個(gè)展示，并與頁(yè)面進(jìn)行聯(lián)動(dòng)的效果。
先來(lái)幾張效果圖：
image.png
image.png
image.png
在這里，有兩點(diǎn)需要總結(jié)一下：
image.png
以前寫(xiě)scrollview的時(shí)候，經(jīng)常忽略scroll-into-view這個(gè)屬性，這次算是重新認(rèn)識(shí)到了
image.png
2.是關(guān)于節(jié)點(diǎn)選擇器的使用
var query = wx.createSelectorQuery();
var idString = '#view' + I
query.select(idString).boundingClientRect()
query.exec((res) => {
boundsArray.push(res[0])
})
舉個(gè)例子：
var query = wx.createSelectorQuery();
query.select('.content').boundingClientRect()
query.exec((res) => {
console.log(res)
})
這里是獲取class='content'的view的相關(guān)信息，包括
image.png
當(dāng)然，這里還可以獲取id='content'的view，只需要修改一句
query.select('#content').boundingClientRect()
然后關(guān)于聯(lián)動(dòng)的話(huà)，就很簡(jiǎn)單了，可以看我具體代碼。
如果覺(jué)得有用的話(huà)，請(qǐng)點(diǎn)個(gè)贊贊再走哈！
