【Html5】 Hbuilder工具+MUI框架,开发H5列表页面不过如此!

本文主要是介绍【Html5】 Hbuilder工具+MUI框架,开发H5列表页面不过如此!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

我们公司大佬写得技术文档,以后可能用的到这个技能,先转载过来以后好直接使用。

转载:https://blog.csdn.net/chendaike/article/details/95453068

侵删,谢谢!


需求分析

小编最近在做一个任务:要求实现一个在微信公众号里面的H5列表页面。拿到这个任务我们首先要进行需求分析,由于是在微信公众号也就是手机里面的H5列表,所以就不可能像PC上的列表页面那样进行分页处理,应该按照手机列表常用的上拉刷新,下拉重新加载的方式实现。所以这个任务主要实现以下两点:

1、    列表页面需实现上拉刷新,下拉重新加载;
2、    动态加载列表数据;

框架选择

基本框架

确定后需求后就要选择合适的技术框架和开发工具进行开发,由于小编在做这个任务之前也没有手机H5开发的项目经验,只在平时阅读技术文章时有一些了解,所以当时想出了以下几种选择:

1、    Eclipse工具+Juqery Mobile UI框架;
2、    Eclipse工具+Juqery框架+iScroll框架;
3、    Hbuilder工具+MUI框架;
4、    WeX5工具及其自带的UI框架。

对比选择

通过比较以上四种组合,小编发现Hbuilder工具+MUI框架这个组合有明显的优势,主要表现在以下几个方面:

1、    Hbuilder工具简单、易用,尤其是强大的联想功能可以极大的简化开发;

å¨è¿éæå¥å¾çæè¿°

2、    可以扩展丰富的插件,比如内置浏览器插件,可以实现刷新页面;

å¨è¿éæå¥å¾çæè¿°

3、    MUI框架具备丰富的示例及技术文档,初学者也可以快速上手;

å¨è¿éæå¥å¾çæè¿°

4、    MUI框架项目只需要引入mui.min.js、mui.min.css即可,是一个轻量级的框架

å¨è¿éæå¥å¾çæè¿°

基于以上优势,小编选择Hbuilder工具+MUI框架来完成H5列表页面的开发,下面小编将会为大家介绍如何快速实现这个H5列表页面。

实现上拉刷新/下拉重新加载的页面效果

1、下载开发工具

大家可以首先到官网(www.dcloud.io)下载HBuilder工具,由于HBuilder工具是基于Eclipse扩展而来,所以下载完成后直接解压缩就可以实现,双击解压缩后的执行文件“HbuilderX.exe”即可打开HBuilder工具,如下图所示:

å¨è¿éæå¥å¾çæè¿°

2、创建项目

新建项目,选中“5+App”后在下拉框中选择mui项目,如下图所示:

å¨è¿éæå¥å¾çæè¿°

输入项目名称后点击创建按钮即可创建项目,项目目录结构如下图所示:

å¨è¿éæå¥å¾çæè¿°

初始index.html页面代码如下图所示(右侧浏览器页签是展示效果图):

å¨è¿éæå¥å¾çæè¿°

3、拷贝示例页面的代码

找到上拉刷新,下拉重新加载的示例页面(pullrefresh.html),如下图所示:

å¨è¿éæå¥å¾çæè¿°

拷贝相关的代码(标签中的内容)到我们的项目页面中,拷贝完成后的效果图如下:

å¨è¿éæå¥å¾çæè¿°

动态加载数据

1、后台接口跨域设置

H5列表页面通过Ajax方式请求后台接口获取列表数据来实现动态加载数据,当H5页面和后台接口服务不在一个Web服务器时需要进行跨域访问。如果跨域访问,这里不在赘述了,一个简单的方法是在后台接口响应时设置以下消息头:

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, t");

2、    加入Ajax请求代码请求后台数据

å¨è¿éæå¥å¾çæè¿°

3、    添加数据处理的函数

å¨è¿éæå¥å¾çæè¿°

4、    改造示例代码中上拉/下拉的动作函数

å¨è¿éæå¥å¾çæè¿°

此步骤完成后的效果图如下:

å¨è¿éæå¥å¾çæè¿°

5、    参考图文列表页面(media-list.html)和右侧带数字角标页面(tableviews-with-badges.html)页面的列表样式改造列表展示样式

右侧带数字角标页面(tableviews-with-badges.html)效果:

å¨è¿éæå¥å¾çæè¿°

图文列表页面(media-list.html)效果:

å¨è¿éæå¥å¾çæè¿°

改造后函数add()里面for循环的代码块如下图所示:

å¨è¿éæå¥å¾çæè¿°

完成后的效果如下:

å¨è¿éæå¥å¾çæè¿°

核心代码如下:

<!--下拉刷新容器--><div id="pullrefresh" class="mui-content mui-scroll-wrapper"><div class="mui-scroll"><!--数据列表--><ul class="mui-table-view mui-table-view-chevron"></ul></div></div><script>mui.init({pullRefresh: {container: '#pullrefresh',down: {style: 'circle',callback: pulldownRefresh},up: {auto: true,contentrefresh: '正在加载...',callback: pullupRefresh}}});var openId = 'o69AI5_BfceXayCj6do_sbERr_ek';var addNum = 0,    pageSize = 10, rowsTotal = 1; function getOrderList() {mui.get('http://localhost:8080/ysp/getOrderList?openId=' + openId + '&offset=' + addNum + '&limit=' + pageSize, {},function(data) {add(data);}, 'json');}function pullupRefresh() {setTimeout(function() {//当所有数据都加载完成时代表没有更多数据了mui('#pullrefresh').pullRefresh().endPullupToRefresh(addNum == rowsTotal); getOrderList();}, 1500);}/*** 下拉刷新具体业务实现*/function pulldownRefresh() {setTimeout(function() {//重新加载页面location.reload();mui('#pullrefresh').pullRefresh().endPulldownToRefresh();}, 1500);}function add(data) {rowsTotal = data.total;if (addNum >= rowsTotal) {addNum = rowsTotal;}addNum += data.orderInfo.length;var table = document.body.querySelector('.mui-table-view');var cells = document.body.querySelectorAll('.mui-table-view-cell');for (i = 0; i < data.orderInfo.length; i++) {var li = document.createElement('li');li.className = 'mui-table-view-cell mui-media';li.innerHTML =data.orderInfo[i].goodsName;table.appendChild(li);}}</script></body>

结束语

以上就是快速实现H5列表页面的过程,相信大家看了之后也能够快速实现一个H5列表页面。另外小编特地整理了下MUI框架的示例代码以及小编完成的H5页面的代码,需要的同学可以关注我们的微信公众号,回复“mui”获取下载地址进行下载.

 欢迎大家关注我们微信公众号,来交流程序员的技术。如果能留言或者点个赞,我也是很开心的,非常感谢!

å¨è¿éæå¥å¾çæè¿°

 

这篇关于【Html5】 Hbuilder工具+MUI框架,开发H5列表页面不过如此!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/944364

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

Spring 框架之Springfox使用详解

《Spring框架之Springfox使用详解》Springfox是Spring框架的API文档工具,集成Swagger规范,自动生成文档并支持多语言/版本,模块化设计便于扩展,但存在版本兼容性、性... 目录核心功能工作原理模块化设计使用示例注意事项优缺点优点缺点总结适用场景建议总结Springfox 是

sqlite3 命令行工具使用指南

《sqlite3命令行工具使用指南》本文系统介绍sqlite3CLI的启动、数据库操作、元数据查询、数据导入导出及输出格式化命令,涵盖文件管理、备份恢复、性能统计等实用功能,并说明命令分类、SQL语... 目录一、启动与退出二、数据库与文件操作三、元数据查询四、数据操作与导入导出五、查询输出格式化六、实用功

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动