vue框架和dropload移动下拉的整合

最新推荐文章于 2024-04-21 09:51:48 发布

转载最新推荐文章于 2024-04-21 09:51:48 发布 · 245 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3500033/blog/1616147

文章标签：

#javascript #python #ViewUI

本文介绍如何将Vue.js与Dropload框架整合用于实现移动端的列表下拉加载更多功能。通过Vue.js简化DOM操作，结合Dropload进行下拉刷新和上拉加载，实现了高效且易于维护的列表组件。

2019独角兽企业重金招聘Python工程师标准>>>

最近web页面的开发用到了一个渐进式的javascript框架vue.js，他可以通过使用简单的标签来代替复杂的js拼接代码。只需要引入vue.js文件，并在需要传参的地方加一些特定标签就可以是在js中获取模板了。在做列表下拉的时候使用了dropload移动下拉框架，通过vue整合把代码拼接的地方vue标签替代了。具体的代码如下：

首先我们需要引入必须的支持文件

	<link href="css/style.css" rel="stylesheet">
	<link href="js/dropload/dropload.css" rel="stylesheet">	
	<script src="js/jquery-1.8.3.min.js"></script>	
	<script src="js/vue.js"></script>
	<script src="js/dropload/dropload.min.js"></script>

其次把需要模板输出的div 加上vue的标签：输入图片说明

然后在js中声明vue

var listVue = new Vue({
		el : "#sale_list",
		data : {
			list : [],
			page : 1
		}
	});

之后dropload下拉框架中输出位置listVue.list.push(data[i]);即可；具体的可以参考下面的两个文档链接 dropload:http://www.jq22.com/jquery-info6960

vue:https://cn.vuejs.org/

这里是一个完整的demo https://download.youkuaiyun.com/download/wwz_my_sunshine/10475481

转载于:https://my.oschina.net/u/3500033/blog/1616147