1. 程式人生 > 其它 >uniapp 解決選單兩行滾動,不使用swiper並且租後右邊露出部分

uniapp 解決選單兩行滾動,不使用swiper並且租後右邊露出部分

實現效果:

解決方法:

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();