Skip to content

TurnPage 仿真翻页 v2.15.0


按需引入

ts
import { createApp } from 'vue'
import App from './App.vue'
import { MeTurnPage } from 'mine-h5-ui'
import 'mine-h5-ui/styles/MeTurnPage.css'

createApp(App).use(MeTurnPage).mount('#app')

提示

  • 如果你觉得重新编写 HTML 结构麻烦,可以直接复制下面的代码。

代码演示

基础用法

  • 通过属性 list 来设置组件的分页数据。
html
<me-trun-page :list="[1, 2, 3, -1]">
  <template #="{ item }">{{item}}</template>
</me-trun-page>

自定义大小

  • 通过属性 width 来设置宽度,默认为 300
  • 通过属性 height 来设置高度,默认为 400
html
<me-trun-page :list="[1, 2, 3, -1]" :width="200" :height="200">
  <template #="{ item }">{{item}}</template>
</me-trun-page>

API

参数

参数说明类型可选值默认值版本
v-model:current双向绑定当前分页number--0v2.15.0
list列表数据any[]----v2.15.0
width宽度number / string--300v2.15.0
height高度number / string--400v2.15.0

方法

方法名说明回调参数版本
--------

基于 MIT 许可发布