Skip to content

Easier-to-use variable height API #27

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

Closed
dts opened this issue Oct 19, 2017 · 4 comments
Closed

Easier-to-use variable height API #27

dts opened this issue Oct 19, 2017 · 4 comments

Comments

@dts
Copy link

dts commented Oct 19, 2017

This is a great library! Really smart architecture.

With mixed lists & complex UIs, it's not always the easiest thing to just spell out the heights of the items individually (mixing in group headers, etc). Fortunately, your basic structure doesn't require that! What works better for me, is to set an explicit style on each item that announces the height (i.e. <h1 style="height: 30px">Some Header</h1>), and then rewire the getVarSize thusly:

    // return a variable size (height) from given index.
    getVarSize: function (index, nocache) {
      var cache = this.delta.varCache[index]
      const get = (index) => {
        var item = this.$slots.default[index];
        if(item.data.staticStyle && item.data.staticStyle.height) {
          var m = item.data.staticStyle.height.match(/^(.*)px$/);
          return Number(m[1]);
        }
        
        return Number(item.data.attrs.height);
      }
      return (!nocache && cache && cache.size) || get(index) || 0
    },

If I were to push this as a PR, I'd make it so it does this if variable is set to true, and retain the original behavior if it's a function. Thoughts?

@tangbc
Copy link
Owner

tangbc commented Oct 19, 2017

Thank you, that's a good idea! Please make this pr.

I notice that in some vue version such as 2.0.0, item.data.attrs.height is not available:

data: {
    attrs: {
        style: 'height: 40px; line-height: 40px;'
    }
}

Please handle different versions of compatible processing, at least 2.0.0, and follow my code style 😀

@tangbc
Copy link
Owner

tangbc commented Oct 20, 2017

Well, let me finish it, you don't have to make pr.

@tangbc
Copy link
Owner

tangbc commented Oct 20, 2017

Released in v1.1.9

@tangbc tangbc closed this as completed Oct 20, 2017
@dts
Copy link
Author

dts commented Oct 20, 2017

cool! just so you know, there are two components to check: data.staticStyle and data.style - depending on how it's specified on the node.

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

No branches or pull requests

2 participants