在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;
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。