需求：

一个卡片上有很多标签，但是最左侧的标签的样式和其他不同，标签是动态的，数量和宽度都不同

 

 

思路：

通过uni.createSelectorQuery()获取元素的位置，然后找出最左边的，给它添加特殊样式

 

示例

html

 

 

js

mounted() {
            for (let i = 0; i < this.data.length; i++) {
                const query = uni.createSelectorQuery().select('.test' + i) //选择节点
                query.fields({ //获取节点的相关信息,对象里可选
                    size: true,
                    rect: true,
                    scrollOffset: true
                }, data => {
                    console.log("得到test" + i + "节点信息" + JSON.stringify(data));
                    if (data.left == 0) { //判断节点left为0的，就是第一个
                        this.data[i].active = true //给数据里添加新的属性，用来判断是否显示
                        this.$set(this.data) //更新视图
                    }
                }).exec()
            }
        }

结果：

 

 

ps:vue 和 uniapp获取节点信息的方式不一样