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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值