实践类

  • 前言

    上篇我在文章中分析了如何去实现瀑布流的布局,以及怎么使用模版去实现数据的插入到html之中。这一篇,主要讲一下三部分的实现,1.数据mock、2.下拉加载、3.上拉刷新。本次demo的地址在此,喜欢的可以给一个Star

    正文

    首先,我们来分析一下数据的mock部分。由于想要实现与具备后台一样的效果,我们必须使用node去实现一个mock的后台,将数据放在json中,然后使用fs模块读取里面的内容,然后根据url进行数据的检索。

    一般来说,下拉加载的数据都是具备分页特性的。主要可分为data(数据段)、page(当前页码)、next(告知前端接下来是否还有数据内容)。

    之后,我们通过exp

  • 前言

    前段时间,在投票系统中实现了h5的瀑布流加载,demo地址。整体的demo实现效果上可分成三个部分:瀑布流+下拉刷新+上拉加载。下面就具体来分析一下如何实现的。

    正文

    首先,瀑布流的实现方式只要有三种:

    1. 在获取内容时,计算出内容的高度,然后使用定位的方式来形成瀑布流(这种方式目前比较常用,但是需要实时计算,性能不是特别高)。

    2. 获得页面的宽度,然后根据页面的宽度计算列数,在进行固定列表的插入(我是用的就是这一种)

    3. 使用css3的列布局,由于兼容性问题需要使用前缀(-moz,-webkit)

    由于本人使用的是第二种方式,因此,我就详细分析一下第二种方式。

    由于设计图是640p

  • 前言

    本篇文章之前,有一篇前言篇,如果你还未读过,建议你花一分钟的时间,先读一下前言篇。前言篇,篇幅较少,并不会花费你太多的时间,但是概括了接下来几篇文章的主要内容。

    本篇文章主要是讲一些移动端富文本开发之前,所需要了解的基础内容。基础内容可以分成三部分。我们首先考虑的是webView与js之间的交互,之后就是原生富文本功能,最后就是Selection和Range的概念。所以,本篇会根据这三部分来详细阐述基础内容。欢迎关注我的github博客。同时也希望你关注和支持我们的项目,github项目地址,谢谢支持。

    正文

    聊聊webView和js的那点事

    我这里并不具体聊webView的具体使用

  • 前言

    本篇为图片上传模块的实践篇。

  • 前言

    本篇内容主要是详解图片上传、重传、进度条、遮罩、错误显示、以及图片删除等功能的分析。