z-paging Documentation

z-paging is a high-performance paging component for uni-app that simplifies implementing pull-to-refresh and load-more functionality. It is designed to be low-coupling and low-intrusion, meaning it manages pagination logic internally so you don't have to define pagination variables in your component's data or handle complex logic in your page code.

Key Features:

• Simple Configuration: Complete pull-to-refresh and load-more functionality can be achieved in just two steps: binding a network request method and binding the pagination result array.
• High Performance: Uses wxs + renderjs on platforms like App-Vue, H5, WeChat Mini Program, and QQ Mini Program to implement pull-to-refresh in the view layer. It also supports virtual lists for smooth rendering of massive datasets (up to millions of rows).
• Flexible Layouts: Supports custom pull-to-refresh/load-more effects, full-screen layouts, or being placed inside arbitrary containers. It also supports internal scroll-view scrolling and page scrolling.
• Rich Functionality: Includes support for internationalization, automatic empty data state management, theme switching, local pagination, chat-style pagination (no flicker), sticky headers, and 'pull-to-enter second floor' effects.
• Cross-Platform: Compatible with Vue & nvue, Vue 2 & Vue 3, JS & TS, and supports H5, App, HarmonyOS Next, and various mini-programs.

To synchronize the z-tabs bottom indicator (dot/bar) with a swiper component, you must use the setDx and unlockDx methods. This ensures the slider moves smoothly during the swiper transition.

1. Listen to the swiper's @transition event and pass e.detail.dx to tabs.setDx().
2. Listen to the swiper's @animationfinish event to update the current index and call tabs.unlockDx().

<template>
  <z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
  <swiper :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
    <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
      xxx
    </swiper-item>
  </swiper>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['测试1','测试2','测试3','测试4'],
				current: 0,
			};
		},
		methods: {
			// tabs notifies swiper to switch
			tabsChange(index) {
				this.current = index;
			},
			// During swiper sliding
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			// When swiper sliding finishes
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			}
		}
	}
</script>

<template>
  <z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
  <swiper :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
    <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
      xxx
    </swiper-item>
  </swiper>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['测试1','测试2','测试3','测试4'],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
			};
		},
		methods: {
			//tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			//swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			//swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			}
		}
	}
</script>

To create a seamless sliding experience where the tab bar indicator (dot/bar) moves in sync with a swiper component, follow this pattern:

1. Use setDx inside the swiper's @transition event to update the indicator position during the slide.
2. Use unlockDx inside the swiper's @animationfinish event to release the lock.
3. Update the current index in both components to keep them in sync.

Note: bar-animate-mode (set to worm or line) is only effective when using this sync pattern.

<template>
  <z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
  <swiper :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
    <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
      xxx
    </swiper-item>
  </swiper>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['测试1','测试2','测试3','测试4'],
				current: 0,
			};
		},
		methods: {
			tabsChange(index) {
				this.current = index;
			},
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			}
		}
	}
</script>