文章列表_基于HBuild_Vue+mui

共14个文件

js：4个

css：2个

html：2个

HBuild

vue

app

1星需积分: 9 13 浏览量 2018-02-18 12:16:35 上传评论收藏 119KB ZIP 举报

"文章列表_基于HBuild_Vue+mui_app" 涉及到的关键技术栈包括HBuild、Vue.js和mui，这三个组件在构建移动应用程序时起着至关重要的作用。下面将对这些技术进行详细解释。 Vue.js，是一款轻量级的前端JavaScript框架，以其易学易用、高性能和灵活的特性受到了广大开发者的青睐。Vue的核心库专注于视图层，易于整合到现有项目中，同时也支持构建复杂的单页应用（SPA）。在"文章列表"的场景中，Vue.js可以用来高效地渲染和管理文章数据，实现动态加载和交互效果。 HBuild是一款强大的HTML5应用开发工具，它提供了全面的开发环境和功能，如代码编辑、调试、预览等，使得开发者能够快速构建Web应用，包括基于Vue.js的应用。在本项目中，HBuild可能是用于创建和管理整个项目的平台，帮助开发者整合Vue.js和mui，实现文章列表的前端开发。 mui则是一个针对移动设备的开源前端框架，专为快速开发移动应用而设计。它提供了丰富的UI组件和API，覆盖了常见的交互和视觉元素，如按钮、列表、滑动选项卡等。在"文章列表"的实现中，mui可能被用来构建用户界面，提供一致且友好的交互体验，如列表项的滑动、点击事件处理等。在"支持动态加载的示例"部分，这通常涉及到Vue.js的分页或无限滚动加载（infinite scroll）功能。Vue.js的组件化特性使得动态加载变得简单，通过监听滚动事件，当用户接近页面底部时，可以向服务器发送请求获取更多文章数据，从而实现无缝滚动加载，提高用户体验。至于标签中的"js"，指的是JavaScript，它是所有现代Web开发的基础，Vue.js就是建立在JavaScript之上的。在本项目中，JavaScript用于实现DOM操作、数据绑定、事件处理等核心功能。文件名"_dev"可能表示的是开发版本，通常包含源代码和未压缩的资源，方便开发者调试和修改。 "文章列表_基于HBuild_Vue+mui_app"项目结合了Vue.js的响应式数据绑定和组件化、HBuild的开发工具支持以及mui的移动优化UI，实现了动态加载的文章列表，展示了现代Web和移动应用开发的高效实践。

资源推荐

资源详情

资源评论

收起资源包目录

文章列表_基于HBuild_Vue+mui.zip （14个子文件）

_dev

css

detail.css 3KB

mui.min.css 74KB

.project 1KB

manifest.json 26KB

unpackage

.confirmed_dependencies 66B

.dependencies 4B

fonts

mui-icons-extra.ttf 29KB

mui.ttf 29KB

detail.html 1KB

detail.js 1KB

vue.min.js 77KB

mui.min.js 120KB

index.js 5KB

index.html 3KB

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>列表到详情最佳实践</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="./css/mui.min.css" rel="stylesheet" /> <style type="text/css"> .mui-media { font-size: 14px; } .mui-table-view .mui-media-object { max-width: initial; width: 90px; height: 70px; } .meta-info { position: absolute; left: 115px; right: 15px; bottom: 8px; color: #8f8f94; } .meta-info .author, .meta-info .time { display: inline-block; } .meta-info .time { float: right; } .mui-table-view:before, .mui-table-view:after { height: 0; } .mui-content>.mui-table-view:first-child { margin-top: 1px; } .banner { height: 180px; overflow: hidden; position: relative; background-position: center; background-color: #ccc; } .banner img { width: 100%; height: auto; } .banner .title { position: absolute; left: 15px; bottom: 15px; width: 90%; font-size: 16px; font-weight: 400; line-height: 21px; color: white; z-index: 11; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">文章列表</h1></header> <div class="mui-content" id="news"> <div class="banner"> <a href="javascript:;" :data-guid="banner.guid" @tap="open_detail(banner)"><img :src="banner.cover" /> <h2 class="title mui-ellipsis-2">{{banner.title}}</h2> <div style="display: none;"> <div class="author">{{banner.author}}</div> <div class="time">{{banner.time}}</div> </div> </a> </div> <div id="list" class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view"> <li class="mui-table-view-cell mui-media" v-for="item in items"> <a href="javascript:;" :data-guid="item.guid" @tap="open_detail(item)"><img class="mui-media-object mui-pull-left" :src="item.cover"> <div class="mui-media-body"> <div class="mui-ellipsis-2">{{item.title}}</div> </div> <div class="meta-info"> <div class="author">{{item.author}}</div> <div class="time">{{item.time}}</div> </div> </a> </li> </ul> </div> </div> </div> <script src="./js/mui.min.js"></script> <script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src='./js/index.js#buildmin' type="text/javascript"></script> </body> </html>

评论收藏

内容反馈