mui是一款基于Vue開發的移動端UI框架，它的特點是輕量、簡潔、美觀。本篇文章將介紹如何在Vue mui中實現分頁功能。

首先，我們需要在Vue mui中引入分頁組件。在Vue文件中，引入mui的樣式文件和JS組件文件：

import '../../lib/mui/css/mui.css';
import mui from '../../lib/mui/js/mui.min.js';
import '../../lib/mui/js/mui.pullToRefresh.js';

接著，在Vue組件中定義分頁所需要用到的數據。我們需要一個currentPage變量表示當前頁碼，一個totalPage變量表示總頁數。同時，我們還需要一個函數page方法，用于處理分頁邏輯。

data () {
return {
currentPage: 1,
totalPage: 1,
pageSize: 20,list: []}
},
methods: {
page () {}
}

然后，在Vue組件的mounted方法中初始化mui的pullToRefresh組件，并在回調函數中添加上拉加載和下拉刷新的方法。

mounted () {
mui.init({
pullRefresh: {
container: '#pullrefresh',
up: {
height: 50,
auto: false,
contentrefresh: '正在加載...',
contentnomore: '沒有更多了',
callback: this.loadMore
},
down: {
style: 'circle',
callback: this.refresh
}
}
})
},
methods: {
refresh () {},
loadMore () {
if (this.currentPage< this.totalPage) {
this.currentPage++
this.page()
} else {
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true)
}
},
page () {}
}

最后，在頁面中添加一個占位符，用于顯示分頁數據。同時，我們需要為占位符添加id，以便之后在mui.init方法中引用。

<div id="pullrefresh"><ul class="mui-table-view">
<li v-for="(item,index) in list" :key="index">{{item}}

于是，我們就成功地在Vue mui中實現了分頁功能。當用戶下拉屏幕時，頁面會執行下拉刷新方法；當用戶上拉屏幕時，頁面會執行加載更多方法。