【微信小程序】實現選擇優惠券的三欄佈局

要實現的佈局：

可選列表中點擊的選項會顯示在已選列表，已選列表中的選項能夠點擊刪除。

第一種方法：

實現需求的思路：三欄分開，頂欄和低欄直接fixed。

實現過程當中出現的問題：

頂欄根據選擇添加和刪除動態變換高度，所以可選列表位置也要動態變化。

第二種方法：

實現需求的思路：只fixed底欄，已選和可選在一個view裏共高度。

實現過程當中出現的問題：

父元素包含頂欄+可選，頂欄高度增長時，

scroll-view底下相應高度就被隱藏在父元素外，沒法拉到最下，且底下要防止底欄遮擋。

項目中使用了第二種方法。

給 scroll-view賦值動態的 padding-bottom來抵消頂欄的動態增長和底欄的遮擋。

第一步:在onShow中獲取底欄高度，給padding-bottom初始值

const query = wx.createSelectorQuery()


query.select('.box').boundingClientRect()


query.exec(function (res) {


console.log(res)


let bottomHeight = res[0].height;


that.setData({  bottomHeight })


})

第二步：在選擇或刪除優惠券時，頂欄高度動態變化，獲取頂欄的bottom值（由於頂欄fixed在頂部，因此bottom值也等於頂欄的高度），padding-bottom=初始的底欄高度+頂欄高度

let  bottomHeight = that.data.bottomHeight ;


const query = wx.createSelectorQuery()


query.select('.voucher-selected-box').boundingClientRect()


query.exec(function (res) {


console.log(res)


let boxHeight = bottomHeight+res[0].bottom;


that.setData({boxHeight})


})

記錄工做平常遇到的問題，今天也是充實的一天！