uniapp 解決選單兩行滾動,不使用swiper並且租後右邊露出部分
阿新 • • 發佈:2021-02-13
實現效果:
解決方法:
1.使用this.$refs.dom獲取元素寬度,再進行計算
經過測試: h5正常,模擬器和手機獲取dome寬度都是undefined,所以這個不可以使用
let isInteger = this.isInteger(this.$refs.menu.length/2), num = 0 if(isInteger) { num = this.$refs.menu.length/2 }else{ num = parseInt(this.$refs.menu.length/2) +1 } this.widthMenu = this.$refs.menu[0].$el.offsetWidth
2.使用uniapp的節點資訊uni.createSelectorQuery()
經過測試:h5,模擬器,手機都正常
const query = uni.createSelectorQuery().in(this); query.select('.menu-list').boundingClientRect(data => { let isInteger = this.isInteger(this.menuList.length/2), num = 0 if(isInteger) { num = this.menuList.length/2 }else{ num = parseInt(this.menuList.length/2) +1 } this.widthMenu = data.width*num*2 }).exec();