item宽度不固定的情况下判断是否超出一行

最新推荐文章于 2024-02-22 16:06:50 发布

前端码农小黄

最新推荐文章于 2024-02-22 16:06:50 发布

阅读量206

点赞数

文章标签：前端工作日常

本文链接：https://blog.csdn.net/weixin_43160044/article/details/127247788

版权

原因：
产品要求只有在下面item项超出一行的时候才显示更多按钮
在这里插入图片描述
解决方案
思路：判断第一个item项和最后一个item项之间有没有高度差
代码如下：

if (this.keywords.length < 2) return
const query = uni.createSelectorQuery().in(this);
query.selectAll('.keywords-item').boundingClientRect()
query.exec(eles => {
  // 获取所有的keywords item项
  const kwels = eles[0]
  if (kwels[0].top < kwels[kwels.length - 1].top) {
    // 展示更多按钮
    this.showMoreBtn = true
  }
})