vant 下拉框样式_使用 Vue 的 Vant.js List 列表组件实现无限下拉
拉取歷史記錄，并在前端做無限下拉展示，是一個非常常見的使用場景。
最近在使用的 Vant (輕量、可靠的移動端 Vue 組件庫)，實現起來就非常方便。
模板實現代碼
v-model="loading"
:finished="finished"
finished-text="暫無更多數據"
@load="load_more_items"
>
v-for="item in items"
:key="item"
:title="item.name"
:value="item.created_at"
/>
Vue.js 實現代碼
new Vue({
el: '#app',
data: {
items: [],
finished: false,
loading: false,
offset: 0,
page: 0,
limit: 10,
},
mounted: function() {
this.fetch_items();
},
methods: {
load_more_items: function() {
this.page += 1;
this.offset = this.limit * this.page;
this.fetch_items();
},
fetch_items: function() {
var that = this;
$.ajax({
url: `/api/get_items?offset=${this.offset}&limit=${this.limit}`,
type: 'get',
dataType: 'json',
success: function(data) {
that.loading = false;
if (data.data.length) {
that.items.push(...data.data);
} else {
that.finished = true;
}
}
});
}
}
});
總結
以上是生活随笔為你收集整理的vant 下拉框样式_使用 Vue 的 Vant.js List 列表组件实现无限下拉的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win10中的bitlock是什么?
- 下一篇： html5倒计时秒杀怎么做,vue 设