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 列表组件实现无限下拉相关推荐

HTML下拉框样式美化
在网页中,下拉框的样式最难美化,默认样式巨丑,好在现在已经有各种框架实现了下拉框的样式美化,主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换,再将对应选项及事件进行关联. 最近一项 ...
css自定义下拉框样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html select 样式t调整_css修改html select下拉框样式(含右边箭头)
css修改html select下拉框样式(含右边箭头)2017-10-12 16:51 我们经常会看到一些页用用的select下拉框非常漂亮,其实很多是用插件实现的. 如果不使用插件,靠纯css能不 ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
css修改layui的下拉框样式 js_layui创建表单下拉框样式不显示
border-left: 5px solid #009688; 注释:solid实体,实心样式: Blockquote:块引用;Fieldset:字段集; 1.所有浏览器都支持标签. fieldse ...
ElementUI:多个Select下拉框存在时调整个别下拉框样式
当dialog中存在多个下拉框的时候,想改变某一个下拉框的样式,于是给某一个select绑定类,发现并没有生效,换了一种方法,将el-select用div包裹,将类绑定在div上,也没有效果. 在控制 ...
jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
store下拉框同步_关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~...
关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~ 代码很简单~4个下拉框~想要实现的效果就是~主下拉框选择了"赵子龙",后面3个下拉框当前选项也同步成"赵子龙& ...
单元格只能下拉框选_数据有效性定义下拉框只能选择一个如何实现选择多个选项...
相信表亲们很多人用过数据有效性,通过数据有效性定义序列,在下拉框中选择想要的选项,然而,数据有效性定义通过下拉框只能选择一个选项,如果要选择多个选项,怎么办呢?我们看看下面的动画: 看这个动画是不是感 ...

vant 下拉框样式_使用 Vue 的 Vant.js List 列表组件实现无限下拉

vant 下拉框样式_使用 Vue 的 Vant.js List 列表组件实现无限下拉相关推荐

最新文章

热门文章