nf_view是基于vue.js的一款组件,集成了请求数据、正在加载、无网络提示,利用vue的插槽(slot)不影响实际业务的情况下,快速的集成数据展示功能。
在header标签引入nf_view.css和nf_view.js
<link rel="stylesheet" type="text/css" href="./nf_view.css" />
<script type="text/javascript" src="./nf_view.js"></script>
在body中引入一下代码
<nf-view ref="nf_view" debug="0" v-cloak>
//业务代码
</nf-view>
在页面初始化函数中引入一下代码,在组件中封装了ajax方法
this.$refs.nf_view.init({
top_refresh: true //可以下拉刷新
});
this.$refs.nf_view.ajax({
url: '',
method: 'get',
data: {
},
loading: true, //显示正在加载动画
token: false //是否在header中传token
}, function(ret) {
self.personal_info = ret;
});
静态页面调试时,由于nf_view中的data_obj为空,页面不显示,调试需在nf-view增加debug=1 此组件为vue全局注册组件,页面中必须引入vue.js