nf_listview

功能描述

nf_listview是基于vue.js的一款组件，集成了请求数据、分页、正在加载、无网络提示，利用vue的插槽（slot）不影响实际业务的情况下，快速的集成列表展示功能。
此组件适用于整个页面只有一个数据列表，例如我的订单、我的收藏、我的关注，使用场景比较多，故封装为组件提高开发效率。

依赖的插件

快速使用

在header标签引入nf_listview.css和nf_listview.js

<link rel="stylesheet" type="text/css" href="./nf_listview.css" />
<script type="text/javascript" src="./nf_listview.js"></script>

在body中引入一下代码

<nf-listview ref="nf_listview" debug="0" v-cloak>
    //业务代码
</nf-listview>

在页面初始化函数中引入一下代码，在组件中封装了ajax方法

this.$refs.nf_listview.init({
    top_refresh: true //可以下拉刷新
});
this.$refs.nf_listview.ajax({
    url: '',
    method: 'get',
    data: {

    },
    limit: 10,
    loading: true, //显示正在加载动画
    token: false //是否在header中传token
}, function(ret) {
    self.article_list = ret;
});

特别说明

静态页面调试时，由于nf_listview中的data_list为空，页面不显示，调试需在nf-listview增加debug=1 此组件为vue全局注册组件，页面中必须引入vue.js和lodash.js

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18