1、移动端上拉加载

网上有很多成熟的插件,比如iscroll。在这里介绍一下用jquery和js写的上拉加载方法。使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的高度,其次需要移动设备窗口的高度,最后需要滚动条距离顶部的高度,移动设备的高度加上滚动条距离顶部的高度等于dom的高度时,表示已经滑动到底部,进而加载下一页,监听滚动条的滑动事件使用scroll()方法。当然这里也可以进行无感知加载,就是当移动设备高度和滚动条高度相加和dom高度接近时就加载下一页的数据。

2、移动端列表查看详情

以新闻列表为例,加载到第十页查看一条新闻的详情,查看详情后需要使用手机的物理回退按键回退到列表页,并且是当前点击的位置,因为移动端浏览器是在一个窗口下加载页面的,只要url地址发生变化,整个页面就会重新加载。如何解决这个问题呢,在这里提供两个思路:一、使用锚点定位和控制div显示隐藏属性。列表页是一个div用于显示列表,详情页是一个div用来展示详情,使用window.onhashchange方法用来监听锚点的变化,一个新闻对应一个id,通过监听锚点变化获取#号后面的新闻id,控制列表div隐藏和详情div的显示,进而展示详情,回退的时候同样使用window.onhashchange来监听,控制列表div的显示和详情div的隐藏。二、使用localStrrage或者sessionStorage。在这里详情页是一个单独的页面,从列表页到详情页的时候,需要先把当前新闻的dom内容、page页码和滚动条距离顶部的距离保存,保存后再跳转到详情页,从详情页返回列表页的时候,虽然url地址发生了变化,按道理来说应该重新初始化列表页面,在这里加上一个判断,判断是否存在页面存储的localStorage或者sessionStorage,如果存在就使用缓存的数据直接追加到页面上,包括滚动条的高度和page页码,如果不存在就重新初始化整个列表页面,这样就做到了查看详情,返回还是在原来的位置。

3、移动端查看原文使用iframe嵌套第三方页面

以新闻列表为例,在新闻详情页面查看原文链接的时候,如果使用iframe引入第三方的url地址正常是可以访问的,但是如果有些网站加了同源限制,禁止iframe引入自己的网站页面,这时候我们应该怎么办呢?

我们使用a标签直接跳转第三方页面。首先在查看新闻详情的时候把已有的dom、page和scrollTop值用localStorage存储起来,在这里为什么不用sessionStorage呢?因为当使用a标签跳转的时候,在移动端页面都是在一个窗口,两个url地址不是同源的话,之前的sessionStorage会消失,所以这里使用localStorage。查看原文后,手机物理回退到详情页的时候首先判断是否含有localStorage,有就直接展示缓存的数据,没有就重新加载列表,在这里展示完缓存数据后就要把localStorage清除掉,如果不清除的话,你刷新页面加载的还是你缓存的数据。接着判断url里面是否含有锚点,如果有代表是查看的详情页,取出id,隐藏列表页div,展示详情页div。

以上是在实际做移动端web项目时遇到的问题以及解决办法,在这里只提供了大致的思路,如果有不明白的或者有疑问的欢迎留言~,当然如果有更好的解决办法的话,欢迎指正!

转载于:https://www.cnblogs.com/web-panpan/p/7766195.html

移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法...相关推荐

  1. uniapp列表的上拉加载

    uniapp列表的上拉加载 1.首先在页面加上loading和'数据已加载完毕'文字提示 <view class="loading" v-if="isFinsh&q ...

  2. HTML列表的上拉加载更多

    只是引用了JQUERY写法 JQUERY请自行下载 <%--Created by IntelliJ IDEA.User: AdministratorDate: 2017/12/27Time: 1 ...

  3. 淘宝产品详情页 上拉加载图片详情 效果实现

    希望有建议可以一起交流. 不累赘多余语言,看效果图: 代码如下 #import "ViewController.h" #import "UIView+Category.h ...

  4. 移动端如何实现上拉加载?下拉刷新?

    实现上拉加载 1.首先需要下载第三方库antd-mobile npm install --save antd-mobile 我们需要使用的是InfiniteScroll 无限滚动.PullToRefr ...

  5. jQuery 上拉加载更多

    上拉加载,当用户浏览到页面底部时候,自动加载下一页的内容 不管是上拉加载还是下拉刷新,其实都离不开一个关键的事件:滚动条滚动事件. 本demo是窗口的滚动条事件,如果需要指定某个元素做上拉加载功能,请 ...

  6. 微信小程序 下拉刷新/上拉加载更多 (上拉加载更多怎么实现)

    参考:微信小程序开发文档->框架>逻辑层->注册页面 实现原理: 1.下拉刷新:由于小程序数据是实时渲染的.我们把data{}内的数据清空重新加载即可实现下拉刷新. 2.上拉加载更多 ...

  7. uniapp局部上拉加载数据

    一.页面局部实现上拉加载数据 只有评论区可以上拉加载数据,网上找到了 vue-infinite-scroll 二.使用 官方示例 1. npm 加载依赖 npm install vue-infinit ...

  8. RecyclerView实现上拉加载功能

    最近在做需求的时候,需要实现列表的上拉加载功能.在这里进行记录分享. 其实上拉加载功能只需要为RecyclerView的Item布局添加一个FooterView,然后通过判断是否滑动到最后一条Item ...

  9. mui用ajax上拉加载更多,mui上拉加载更多的使用

    demo地址 mui框架中上拉加载的坑 1.在函数自己上拉加载行为后的回调函数 2.在mui封装的上拉加载中,点击某一项会失效. 解决方法 1.该函数是必须要写的,用来写自己的逻辑需求,但是一般情况下 ...

最新文章

  1. esxi里面安装openwrt和其他虚拟机
  2. 浅析网站SEO整站优化的优势!
  3. 理解JS中的this的指向
  4. linux安装apache mysql tomcat
  5. boost::pfr::tuple_size相关的测试程序
  6. QT的QSignalBlocker类的使用
  7. Subversion Server For Windows安装指南
  8. PHP 面向对象使用案例
  9. vue实现搜索框记录搜索历史_2018-09-13 基于Vue的搜索栏功能实现(we-ui)
  10. 玩转java并发工具_玩Java并发
  11. 【渝粤题库】广东开放大学 人力资源管理 形成性考核
  12. android放大镜无广告,Android放大镜的实现代码
  13. 下载chrome驱动 for selenium库
  14. python 双层for循环_day05-Python运维开发基础(双层循环、pass/break/continue、for循环)...
  15. STM32F103:二.(3)DHT11温湿度
  16. sql动态sql给变量复值_在动态SQL中使用变量
  17. python控制代码使用的gpu
  18. 【推荐】前沿智能视频分析深度学习算法框架-NVIDIA DEEPSTREAM5.0 【原理介绍】
  19. Centos7 下载安装Redis
  20. excel 查找重复值方法

热门文章

  1. Puppet基础篇3-安装Puppet前期的准备工作
  2. 自定义leftBarButtonItem的button
  3. 60幅精美绝伦的绘景(Matte Paintings)作品欣赏(上篇)
  4. lvs+keepalived简单配置
  5. 高房价可控制人口增长与人口素质?
  6. 配置安装光盘为yum源
  7. PYTHON1.day01
  8. 对于数据库连接池的一些思考和MyBatis的集成与使用
  9. 文本占用的高度和范围
  10. 26. Intellij IDEA 启动项目ClassNotFoundException