关于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;
}
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理