<script>
const app = new Vue({
el: "#app",
data: {
data: {},
pageIndex: 1
},
created: function() {
let me = this;
this.utils.muiAjax(
config.httpKintech + '/appkintech/api/po/listForValid', {
// '127.0.0.1:9090/appkintech/api/po/listForValid', {
showLoad: true, //显晃
data: {
// data: this.user
pageSize: 3,
pageIndex: me.pageIndex
},
success: function(result) {
if (result && result.data) {
me.data = result.data;
me.pageIndex++;
}
},
success2: function(data) {
console.log("success2");
}
})
},
methods: {
test(id) {
mui.toast(id);
},
search(id) {
mui.toast(id);
}
}
});
mui.init({
pullRefresh: {
container: "#app", //待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
down: {
style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
height: '50px', //可选,默认50px.下拉刷新控件的高度,
range: '100px', //可选 默认100px,控件可下拉拖拽的范围
offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
auto: false, //可选,默认false.首次加载自动上拉刷新一次
callback: down //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
},
up: {
height: 50, //可选.默认50.触发上拉加载拖动距离
auto: false, //可选,默认false.自动上拉加载一次
contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;
callback: up //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
//下拉刷新事件
function down() {
let me = this;
utils.muiAjax(
config.httpKintech + '/appkintech/api/po/listForValid', {
showLoad: true, //显晃
data: {
// data: this.user
pageSize: 3,
pageIndex: 1
},
success: function(result) {
if (result && result.data) {
app.data = result.data;
}
mui('#app').pullRefresh().endPulldown();
},
success2: function(data) {
console.log("success2");
}
})
}
//上拉加载事件
function up() {
let me = this;
utils.muiAjax(
config.httpKintech + '/appkintech/api/po/listForValid', {
showLoad: true, //显晃
data: {
// data: this.user
pageSize: 3,
pageIndex: app.pageIndex
},
success: function(result) {
if (result && result.data && result.data.list) {
app.data.list = app.data.list.concat(result.data.list);
app.pageIndex++;
//如果还有更多数据传入false,否则true
me.endPullupToRefresh(false);
} else {
me.endPullupToRefresh(true);
}
},
success2: function(data) {
console.log("success2");
}
})
}
</script>
vue:在vue的外部也可以使用vue的属性--vue结合mui下拉刷新,上拉加载
最新推荐文章于 2022-07-07 09:49:45 发布