Uinapp中js修改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;

}

}