您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > HTML

如何快速开发H5列表页面

时间:2019-07-17 11:09:27  来源:  作者:

小编最近在做一个任务:要求实现一个在微信公众号里面的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工具简单、易用,尤其是强大的联想功能可以极大的简化开发;如下图所示:

如何快速开发H5列表页面

 

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

如何快速开发H5列表页面

 

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

如何快速开发H5列表页面

 

4、MUI框架项目只需要引入mui.min.js、mui.min.css即可,是一个轻量级的框架。如下图所示:

如何快速开发H5列表页面

 

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

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

1、下载开发工具

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

如何快速开发H5列表页面

 

2、创建项目

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

如何快速开发H5列表页面

 

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

如何快速开发H5列表页面

 

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

如何快速开发H5列表页面

 

3、拷贝示例页面的代码

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

如何快速开发H5列表页面

 

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

如何快速开发H5列表页面

 

动态加载数据

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");

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

如何快速开发H5列表页面

 

3、添加数据处理的函数

如何快速开发H5列表页面

 

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

如何快速开发H5列表页面

 

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

如何快速开发H5列表页面

 

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

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

如何快速开发H5列表页面

 

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

如何快速开发H5列表页面

 

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

如何快速开发H5列表页面

 

完成后的效果如下:

如何快速开发H5列表页面

 

小结

以上就是快速实现H5列表页面的过程,相信大家看了之后也能够快速实现一个H5列表页面。



Tags:H5   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  Tags: H5  点击:(90)  评论:(0)  加入收藏
首先明确几个概念1. W3C:指万维网联盟(World Wide Web Consortium),是一个国际的标准的制定机构。2. H5(HTML5,HyperText Markup Language 5的缩写),HTML5 是由W3C制定的新HTML标...【详细内容】
2021-07-06  Tags: H5  点击:(153)  评论:(0)  加入收藏
Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。 原生是Native APP,H5就是Web App在Hybrid 当中,如...【详细内容】
2021-04-28  Tags: H5  点击:(289)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18  Tags: H5  点击:(229)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29  Tags: H5  点击:(165)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12  Tags: H5  点击:(393)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10  Tags: H5  点击:(109)  评论:(0)  加入收藏
上一篇主要是对新项目的一些介绍和对技术栈升级的思考,之前也提到,既然是新项目,从0开始,没有历史包袱,应该可以放手玩了。但考虑到如何能让老项目受益,并且从技术架构的普适性去...【详细内容】
2020-10-23  Tags: H5  点击:(87)  评论:(0)  加入收藏
本文主要讲述的是采用浏览器来识别二维码 / 条形码等,并对其解析得到相应的结果。还有一个目的就是为了验证 iPhone 是否无法自动开启摄像头进行扫描。需求也非常简单,就是用...【详细内容】
2020-10-20  Tags: H5  点击:(1189)  评论:(0)  加入收藏
一、说明1. JSMpeg简介JSMpeg是一个JavaScript编写的视频解码器,支持MPEG1视频、MP2音频解码,WebGL&Canvas2D渲染、WebAudio音频输出。 JSMpeg可以通过Ajax加载静态视频、或...【详细内容】
2020-09-02  Tags: H5  点击:(160)  评论:(0)  加入收藏
▌简易百科推荐
此文由掘金@天行天忌授权发布,前端晚间课对其内容进行微改。 HTML,超文本标记语言,是一种用于创建网页的标准标记语言。自从引入 HTML 以来,它就一直用于构建互联网。与 JavaScr...【详细内容】
2021-11-23  前端晚间课    Tags:HTML6   点击:(326)  评论:(0)  加入收藏
HTML是什么?超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。“...【详细内容】
2021-11-05  人生三部曲丶    Tags:HTML   点击:(40)  评论:(0)  加入收藏
一、iframe标签 自己编写的页面中如果要引用外部的页面的话,可以使用iframe标签来实现。为了更好地理解举个例子,前面几篇中我们都是在index.hmtl中编写代码。如果有个需求是...【详细内容】
2021-11-03  HillelDu    Tags:html   点击:(29)  评论:(0)  加入收藏
我们倾向于使用HTML与CSS、JavaScript等,使我们的网站或博客看起来更有吸引力,但你知道仅HTML就有很多实用的秘密,可能会派上用场,帮助你设计一个华丽的网站?下面是一些很酷的HTM...【详细内容】
2021-08-13  杭州程序员小张    Tags:HTML   点击:(90)  评论:(0)  加入收藏
meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。 1、声明文档使用的字符编码<meta charset=&#39;utf-8&#39;>以下设置更为详细:<meta http-equiv="Content-...【详细内容】
2021-08-12  简易编程    Tags:meta标签   点击:(91)  评论:(0)  加入收藏
本节我们讲HTML表单标签,当你在网页输入框提交一个数据,这条数据一般是提交给了服务器,然后服务器根据请求返回你想要的数据,这个你输入信息的输入框或者提交的按钮就是HTML表...【详细内容】
2021-06-25  科技现象    Tags:HTML   点击:(141)  评论:(0)  加入收藏
背景日常工作中,项目编程免不了需要使用配置文件,早期yaml出现之前,大部分配置文件采用xml形式,但是以xml格式储存的数据要比以其他格式(如json、yaml)储存占有的空间要大得多,因为...【详细内容】
2021-06-21  爱读书的程序员    Tags:yaml   点击:(265)  评论:(0)  加入收藏
XML; 是什么? Extensible Markup Languare 可扩展标记型语言 为什么要有XML? 1.HTML的标签是固定的,不可以改变,也不可以进行一个&middot;&middot;&middot;扩展 2.HTML语法松散...【详细内容】
2021-06-01  LeviT    Tags:XML   点击:(193)  评论:(0)  加入收藏
同事跟我说他用jQuery取不到页面上隐藏元素input的值,他的html页面大概内容如下。<!DOCTYPE html><html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/...【详细内容】
2021-05-18  IT洞察者    Tags:Html   点击:(220)  评论:(0)  加入收藏
HTML5语义化与新特性什么是HTML语义化?表示选择合适的标签(语义化标签)便于开发者阅读和写出更优雅的代码为什么要使用语义化标签?1). 在没有CSS样式的情况下,页面整体也会呈现...【详细内容】
2021-03-02      Tags:HTML   点击:(236)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条