关于css:uniapp操作dom改变css样式

在 uniapp 中，想给元素增加一些动静的 css 款式，例如 transform,

uni.createSelectorQuery().select(".sticke").boundingClientRect((res)=>{uni.createSelectorQuery().select(".sticke").style.transform
}).exec()

上述代码根本无法实现给元素增加 transform，所以有了申明 css 变量，

在 swiper 组件中减少缩略图展现，点击某一项，展现到对应的图片

1. 重点在 data 中注册属性 transStyle

2. 轮播 change 事件设置 transStyle

getDetail(e,index){
    this.currentIndex = index
    this.detail = Object.assign(this.detail,e)
    this.scrollLeft = index*50
    this.transStyle = 'translate('+index*-100+'%, 0px)'
},

3. 点击缩略图，敞开自动播放，延时执行

move(e,index){
    this.autoplay = false
    this.currentIndex = index
    this.detail = Object.assign(this.detail,e)
    this.scrollLeft = index*50
    this.transStyle = 'translate('+index*-100+'%, 0px)'
    setTimeout(()=>{this.autoplay = true},5000)
}

4. 找到要扭转的元素，设置 css 变量

#swiper{
.uni-swiper-slide-frame{transform: var(--transStyle) !important;
}
}