search

Dafrok / vue-iscroll-view

IScroll-view component for Vue 2.x
https://dafrok.github.io/vue-iscroll-view
MIT License
148 stars 26 forks source link

A suggestion #11

Closed momopig closed 7 years ago

momopig commented 7 years ago

Hi, thank you for your vue component, I use it in my project, it really did me a favor.

During my using your component, a suggestion comes into my mind: the component should not create the scroller element(div) by itself, just let the user do it. The reasons are as follows:

  1. if scroller element is a div, it isn't semantic enough. When I used Iscroll plugin in a Jquery project years ago, I usually used a 'ul' element as scroller element, it is more semantic.
  2. Although vue-iscroll-view provides scrollerClass for users to add class to scroller element, the css class selector doesn't work for scroller element when we add a 'scoped' attribute to style tag. As you know, when we set a scoped attribute to style tag, Vue will add a hash attribute just like 'data-v-xxxxx' to html tag, and also add an attribute selector to css code, just like '.scroller[data-v-xxxxx]{display:flex}'. When the vue-iscroll-view add a div as scroller element, Vue is fail to add an atrribute to it. So the css code changed by Vue which is used for decorating the scroller element that has not a hash attribute will not work for the scroller element.

I'm looking forward your reply.

Dafrok commented 7 years ago

Glad to hear these suggestions 😄

  1. I think the scroller just should be a wrapper with no semantics, you can put an ul element inside, it's semantic enough. If you have some solid reason to prove it is totally necessary, I will consider adding a property tag just like TransitionGroup component.
  2. That's really a problem, you can try to resolve it with a CSS selector ISCROLL_COMPONENT>div this time. However, I have no good idea about supporting scoped CSS. Do you have some?
Dafrok commented 7 years ago

Hello, is somebody here? @momopig

momopig commented 7 years ago

@Dafrok My implementation ideas is: As you know, the scrollView element is the parent node of scroller element, and they are in the same css scope. We can get the hash attribute just like 'data-v-xxxx' from the scrollView element, and create a same one to the scroller element. The concrete implementation will show in my code, and I have sent a pull request.

Dafrok commented 7 years ago

1.0.3 with #14 has been released.