使用HTML5开发App(六)

这节课讲的是下拉刷新,上拉加载更多,方便读者们的学习,我会把他们分解开来讲,然后再加到咱们“网易新闻”项目中去

上拉刷新

创建项目


使用HTML5开发App(六)_第1张图片

创建子页面

使用HTML5开发App(六)_第2张图片
list页面
使用HTML5开发App(六)_第3张图片

主页面内容比较简单,只需要创建子页面即可

 

在list页面写下拉刷新代码

 

HTML代码布局


 
 

效果如下:


使用HTML5开发App(六)_第4张图片

上拉加载更多

mui的上拉加载和下拉刷新类似,都属于pullRefresh插件只是里面的关键字不同而已,代码如下


    

HTML布局代码如下:


    

上拉加载更多

效果如下:

使用HTML5开发App(六)_第5张图片
上拉加载更多

上拉加载更多和下拉刷新更多在App项目中是最常见功能,现在我们来把上拉加载更多加载到“网易新闻”的项目中
【注意】这里需要注意修改的地方是


我们需要在mil-content容器里面添加class类名和id,代码如下:

//修改前:
//修改后:

里面还得需要再添加一个容器


代码如下:

 

按照上节文章中修改最终代码为:

        
    

效果如下:

使用HTML5开发App(六)_第6张图片
项目中的效果

在这里非常感谢小伙伴们的支持。
(完)

你可能感兴趣的:(使用HTML5开发App(六))