Pagination （分页器）

pagination

• 类型：object

使用分页器导航。分页器可使用小圆点样式（默认）、分式样式或进度条样式。如果只有一个slide，则隐藏分页器导航。

options: {
	pagination: {
		el: true,
	},
},

type

• 类型：string
• 默认值：bullets

分页器样式类型，可选

bullets 圆点（默认） fraction 分式 progressbar 进度条 custom 自定义

options: {
	pagination: {
		el: true,
        type: 'bullets',
	},
},

progressbarOpposite

• 类型：boolean
• 默认值：false

使进度条分页器与Swiper的direction参数相反，也就是说水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条

options: {
	pagination: {
		el: true,
        type: 'progressbar',
        progressbarOpposite: true,
	},
},

dynamicBullets

• 类型：boolean
• 默认值：false

动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏。

options: {
	pagination: {
		el: true,
        dynamicBullets: true,
	},
},

dynamicMainBullets

• 类型：number
• 默认值：1

动态分页器的主指示点的数量

options: {
	pagination: {
		el: true,
        dynamicBullets: true,
        dynamicMainBullets: 2
	},
},

clickable

• 类型：boolean
• 默认值：false

此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。

options: {
	pagination: {
		el: true,
        clickable :true,
	},
},

mySwiper.pagination.render()

渲染分页器。

methods: {
	render() {
		this.$refs.zSwiper.swiper.pagination.render();
	}
}

mySwiper.pagination.update()

更新分页器。

methods: {
	update() {
		this.$refs.zSwiper.swiper.pagination.update();
	}
}

paginationRender()

事件函数，当你的pagination渲染时执行。每次切换Swiper，分页器都会渲染一次。

one

<z-swiper ref="zSwiper" v-model="list" @paginationRender="paginationRender">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

methods: {
	paginationRender() {
		console.log("分页器渲染了",this.$refs.zSwiper.swiper)
	}
}

two

<z-swiper ref="zSwiper" v-model="list" @swiper="swiper">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

methods: {
	swiper(){
		this.$refs.zSwiper.swiper.on("paginationRender", (swiper) => {
			console.log("分页器渲染了",swiper)
		})
	}
}

paginationUpdate()

事件函数，当你的pagination更新时执行。

one

<z-swiper ref="zSwiper" v-model="list" @paginationUpdate="paginationUpdate">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

methods: {
	paginationUpdate() {
		console.log("分页器更新了",this.$refs.zSwiper.swiper)
	}
}

two

<z-swiper ref="zSwiper" v-model="list" @swiper="swiper">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

methods: {
	swiper(){
		this.$refs.zSwiper.swiper.on("paginationUpdate", (swiper) => {
			console.log("分页器更新了",swiper)
		})
	}
}