@flowlist/vue-listview

vue-listview

没什么好解释的，中文文档

---

Installation

npm install @flowlist/vue-listview
# or
yarn add @flowlist/vue-listview

Why?

如果你不想把自己的生命浪费在无意义的重复代码编写，就来使用这个组件吧

display a basic listview

<template>
  <div>
    <ul>
      <li v-for="user in users">{{ user.name }}</li>
    </ul>
    <button @click="fetchUsers">click load next page</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    users: [],
    page: 1
  }),

  methods: {
    fetchUsers() {
      getUsers({ page: this.page })
        .then(users => {
          this.users = this.users.concat(users)
          this.page++
        })
    },
  },

  created() {
    this.fetchUsers()
  }
}
</script>

display the listview state

<template>
  <div>
    <p v-if="nothing">Nothing...</p>
    <ul v-else>
      <li v-for="user in users">{{ user.name }}</li>
    </ul>
    <p v-if="error">Error: {{ error.message }}</p>
    <p v-if="loading">Loading...</p>
    <p v-if="noMore">End...</p>
    <button @click="fetchUsers" v-else>click load next page</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false,
    nothing: false,
    error: null,
    noMore: false,
    users: [],
    page: 1
  }),

  methods: {
    fetchUsers() {
      if (this.loading) {
        return
      }
      this.error = null
      this.loading = true
      getUsers({ page: this.page })
        .then(users => {
          this.users = this.users.concat(users)
          this.nothing = !this.users.length
          this.noMore = this.users.length && !user.length
          this.page++
        })
        .catch(error => {
          this.error = error
        })
        .finally(() => {
          this.loading = false
        })
    },
  },

  created() {
    this.fetchUsers()
  }
}
</script>

one page display multiple listview

<template>
  <tab-container>
    <template #tab-1>
      <p v-if="state1.nothing">Nothing...</p>
      <ul v-else>
        <li v-for="user in state1.users">{{ user.name }}</li>
      </ul>
      <p v-if="state1.error">Error: {{ state1.error.message }}</p>
      <p v-if="state1.loading">Loading...</p>
      <p v-if="state1.noMore">End...</p>
      <button @click="fetchList1" v-else>click load next page</button>
    </template>

    <template #tab-2>
      <p v-if="state2.nothing">Nothing...</p>
      <ul v-else>
        <li v-for="user in state2.users">{{ user.name }}</li>
      </ul>
      <p v-if="state2.error">Error: {{ state2.error.message }}</p>
      <p v-if="state1.loading">Loading...</p>
      <p v-if="state2.noMore">End...</p>
      <button @click="fetchList2" v-else>click load next page</button>
    </template>
  </tab-container>
</template>

<script>
export default {
  data: () => ({
    state1: {
      loading: false,
      nothing: false,
      error: null,
      noMore: false,
      data: [],
      page: 1
    },
    state2: {
      loading: false,
      nothing: false,
      error: null,
      noMore: false,
      data: [],
      page: 1
    }
  }),

  methods: {
    fetchList1() {
      if (this.state1.loading) {
        return
      }
      this.state1.error = null
      this.state1.loading = true
      getList1Data({ page: this.state1.page })
        .then(users => {
          this.state1.data = this.state1.data.concat(users)
          this.state1.nothing = !this.state1.data.length
          this.state1.noMore = this.state1.data.length && !user.length
          this.state1.page++
        })
        .catch(error => {
          this.state1.error = error
        })
        .finally(() => {
          this.state1.loading = false
        })
    },
    fetchList2() {
      if (this.state2.loading) {
        return
      }
      this.state2.error = null
      this.state2.loading = true
      getList2Data({ page: this.state2.page })
        .then(users => {
          this.state2.data = this.state2.data.concat(users)
          this.state2.nothing = !this.state2.data.length
          this.state2.noMore = this.state2.data.length && !user.length
          this.state2.page++
        })
        .catch(error => {
          this.state2.error = error
        })
        .finally(() => {
          this.state2.loading = false
        })
    },
  },

  created() {
    this.fetchList1()
  }
}
</script>

one app has many page

You want repeat the same code again and again?

Usage

<template>
  <tab-container>

    <template #tab-1>
      <ListView
        func="fetchList1"
        type="page"
      >
        <ul slot-scope="{ list }">
          <li v-for="user in list">{{ user.name }}</li>
        </ul>
      </ListView>
    </template>

    <template #tab-2>
      <ListView
        func="fetchList2"
        type="page"
      >
        <ul slot-scope="{ list }">
          <li v-for="user in list">{{ user.name }}</li>
        </ul>
      </ListView>
    </template>

  </tab-container>
</template>

<script>
export default {
  data: () => ({
    // no data...
  }),
  methods: {
    // no code...
  }
}
</script>

document

API Reference

props document

slots document

Test

see：@flowlist/js-core

License

MIT