【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

相关文章

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

MySql match against工具详细用法

《MySqlmatchagainst工具详细用法》在MySQL中,MATCH……AGAINST是全文索引(Full-Textindex)的查询语法,它允许你对文本进行高效的全文搜素,支持自然语言搜... 目录一、全文索引的基本概念二、创建全文索引三、自然语言搜索四、布尔搜索五、相关性排序六、全文索引的限制七

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的