1、參數(shù)說明
distanceLeft：定義一個(gè)數(shù)組存儲(chǔ)各個(gè)循環(huán)元素距離左邊的值。isPage：控制頁面顯示與隱藏。scrollLeft：動(dòng)態(tài)設(shè)置滾動(dòng)距離。isAactivity：存儲(chǔ)tabBar對應(yīng)id值。因?yàn)閺?code>tabBar頁面跳轉(zhuǎn)到tabBar頁面時(shí)不能在路徑上攜帶參數(shù)，所以此參數(shù)存儲(chǔ)在全局變量中。文章來源：http://www.zghlxwxcb.cn/news/detail-534241.html
2、JavaScript部分
obtainWidth() {
let that = this,
query = wx.createSelectorQuery();
query = query.selectAll('#idScrollLeft').boundingClientRect();
query.exec(function (res) {
that.setData({
distanceLeft: res[0].map(item => item.left)
}, function () {
let key = getApp().globalData.isAactivity,
distanceLeft = that.data.distanceLeft;
// 獲取橫向滾動(dòng)各個(gè)元素寬度
if (distanceLeft.length === 0) {
that.obtainWidth();
} else {
that.setData({
scrollLeft: that.data.distanceLeft[key - 1]
}, function () {
wx.hideLoading();
});
}
});
});
}
3、代碼解析
在微信小程序中使用
scroll-view組件實(shí)現(xiàn)動(dòng)態(tài)設(shè)置滾動(dòng)條距離，在本人的項(xiàng)目中需要通過首頁點(diǎn)擊tabBar進(jìn)入分類頁面，所以在分類頁面使用scroll-view組件實(shí)現(xiàn)分類頁面的橫向tabBar功能。當(dāng)從首頁點(diǎn)擊不同的tabBar進(jìn)入分類頁面時(shí)需要顯示對應(yīng)的tabBar項(xiàng)在頁面可視區(qū)域內(nèi)。idScrollLeft是組建id，定義在每個(gè)循環(huán)出來的tabBar項(xiàng)上面，通過微信小程序相關(guān)的API可以獲取到每個(gè)tabBar距離左邊的值。此文章主要的特點(diǎn)是，當(dāng)?shù)谝淮螆?zhí)行函數(shù)的時(shí)候無法獲取到對應(yīng)的距離值，這是因?yàn)轫撁孢€沒有渲染，所以就獲取不到，本人嘗試使用this.setData里面的第二個(gè)參數(shù)解決，但是解決不了；也嘗試使用wx.nextTick()解決，結(jié)果也是無濟(jì)于事。最后還是通過判斷distanceLeft.length === 0時(shí)繼續(xù)函數(shù)自調(diào)的方式實(shí)現(xiàn)。此方案存在一個(gè)閃屏問題，目前還沒有找到合適的方法解決。閃屏內(nèi)容如下，在首頁通過tabBar進(jìn)入分類頁面時(shí)，首先要渲染分類頁面，此時(shí)distanceLeft還沒有獲取到對應(yīng)的值，所以動(dòng)態(tài)的定位值為0，當(dāng)再次調(diào)用obtainWidth函數(shù)時(shí)才得到對應(yīng)值。此時(shí)才設(shè)置對應(yīng)距離值，如果這個(gè)tabBar不是首個(gè)，那么就會(huì)定位到對應(yīng)tabBar，并把它移動(dòng)到屏幕可視區(qū)域內(nèi)，在移動(dòng)的過程中就出現(xiàn)了閃屏效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-534241.html
到了這里，關(guān)于微信小程序如何及時(shí)獲取頁面循環(huán)元素的寬度、高度、距離左邊值、函數(shù)自調(diào)、類似遞歸、閃屏、selectAll、exec、globalData、map、scroll-view的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
