List list

introduce

Used to display long lists. When the list is about to scroll to the bottom, the event will be triggered and more list items will be loaded.

Because the page scrolling cannot be monitored in the uniapp component, it is necessary to monitor the scrolling in the page and then send it to zebra-ui through uni.$emit.

Basic usage

The List component controls the loading status through the two variables loading and finished. When the component scrolls to the bottom, the load event is triggered and loading is set to true. At this time, you can initiate an asynchronous operation and update the data. After the data is updated, set loading to false. If all the data has been loaded, just set finished to true.

<z-list
   id="list1"
   v-model:loading="list[0].loading"
   :finished="list[0].finished"
   finished-text="No more"
   @load="onLoadData(0)"
>
   <z-cell
     v-for="item in list[0].items"
     :key="item"
     :title="`Cell${item}`"
     value="content"
   />
</z-list>

<script lang="ts" setup>
import { ref } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
const list = ref([
   {
     items: [] as string[],
     refreshing: false,
     loading: false,
     error: false,
     finished: false
   },
   {
     items: [] as string[],
     refreshing: false,
     loading: false,
     error: false,
     finished: false
   },
   {
     items: [] as string[],
     refreshing: false,
     loading: false,
     error: false,
     finished: false
   }
])

onPageScroll((event: any) => {
   // $emit name is z-list-${component id}
   uni.$emit(`z-list-list1`, event)
})

const onLoadData = (index: number) => {
   const currentList = list.value[index]
   currentList.loading = true

   setTimeout(() => {
     if (currentList.refreshing) {
       currentList.items = []
       currentList.refreshing = false
     }

     for (let i = 0; i < 10; i++) {
       const text = currentList.items.length + 1
       currentList.items.push(text < 10 ? '0' + text : String(text))
     }

     currentList.loading = false
     currentList.refreshing = false
     if (index === 1 && currentList.items.length === 10 && !currentList.error) {
       currentList.error = true
     } else {
       currentList.error = false
     }

     if (currentList.items.length >= 40) {
       currentList.finished = true
     }
   }, 2000)
}
</script>

Error message

If the list data fails to load, set error to true to display an error prompt. After the user clicks on the error prompt, the load event will be retriggered.

<z-list
   id="list2"
   v-model:loading="list[1].loading"
   v-model:error="list[1].error"
   :finished="list[1].finished"
   error-text="Request failed, click to reload"
   @load="onLoadData(1)"
>
   <z-cell
     v-for="item in list[1].items"
     :key="item"
     :title="`Cell${item}`"
     value="content"
   />
</z-list>

Pull down to refresh

The List component can be used in conjunction with the PullRefresh component to achieve the pull-down refresh effect.

<z-pull-refresh
   id="refresh1"
   v-model="list[2].refreshing"
   @refresh="onRefresh(2)"
>
   <z-list
     id="list3"
     v-model:loading="list[2].loading"
     :finished="list[2].finished"
     finished-text="No more"
     @load="onLoadData(2)"
   >
     <z-cell
       v-for="item in list[2].items"
       :key="item"
       :title="`Cell${item}`"
       value="content"
     />
   </z-list>
</z-pull-refresh>

import { ref } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
const list = ref([
   {
     items: [] as string[],
     refreshing: false,
     loading: false,
     error: false,
     finished: false
   },
   {
     items: [] as string[],
     refreshing: false,
     loading: false,
     error: false,
     finished: false
   },
   {
     items: [] as string[],
     refreshing: false,
     loading: false,
     error: false,
     finished: false
   }
])

onPageScroll((event: any) => {
   uni.$emit(`z-list-list1`, event)
   uni.$emit(`z-list-list2`, event)
   uni.$emit(`z-list-list3`, event)
   uni.$emit(`z-pull-refresh-refresh1`, event)
})

const onLoadData = (index: number) => {
   const currentList = list.value[index]
   currentList.loading = true

   setTimeout(() => {
     if (currentList.refreshing) {
       currentList.items = []
       currentList.refreshing = false
     }

     for (let i = 0; i < 10; i++) {
       const text = currentList.items.length + 1
       currentList.items.push(text < 10 ? '0' + text : String(text))
     }

     currentList.loading = false
     currentList.refreshing = false
     if (index === 1 && currentList.items.length === 10 && !currentList.error) {
       currentList.error = true
     } else {
       currentList.error = false
     }

     if (currentList.items.length >= 40) {
       currentList.finished = true
     }
   }, 2000)
}

const onRefresh = (index: number) => {
   list.value[index].finished = false
   onLoadData(index)
}

Props

Events

method

Through ref, you can get the List instance and call the instance method.

Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.