Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于轮播图div.swiper的困惑 #15

Open
lightersss opened this issue Apr 13, 2021 · 2 comments
Open

关于轮播图div.swiper的困惑 #15

lightersss opened this issue Apr 13, 2021 · 2 comments

Comments

@lightersss
Copy link

老师您好,有点轮播图的问题想请教一下

<div class="swiper">
        <slot></slot>
 </div>

在html中会被加上transition和transform

<div data-v-bc58910a="" class="swiper" style="transform: translate3d(-415px, 0px, 0px); transition: all 0ms ease 0s;">

请问下这边的style是怎么加上的呢?
因为template中没有v-bind,而script中关于transform和transition的内容都被赋值给了data中的swiperStyle变量,所以不太清楚最终怎么反应到了style上

@lightersss
Copy link
Author

老师您好,我又仔细查看了一下代码,现在有了一点自己的想法。
在134行的this.swiperStyle = swiperEl.style;中swiperEl.style是一个对象,在赋值的过程中是把this.swiperStyle这个指针指向了内存中的CSSStyleDeclaration这个对象,当修改swiperStyle 的时候其实swiperEl.style也已经修改了,所以能够反映到let swiperEl = document.querySelector('.swiper');这个DOM节点上。
如果理解的不正确,还请王老师指正

@lidaye910416
Copy link

老师您好,我又仔细查看了一下代码,现在有了一点自己的想法。 在134行的this.swiperStyle = swiperEl.style;中swiperEl.style是一个对象,在赋值的过程中是把this.swiperStyle这个指针指向了内存中的CSSStyleDeclaration这个对象,当修改swiperStyle 的时候其实swiperEl.style也已经修改了,所以能够反映到let swiperEl = document.querySelector('.swiper');这个DOM节点上。 如果理解的不正确,还请王老师指正

你这个理解是对的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants