美文网首页
带tab栏上拉加载

带tab栏上拉加载

作者: 脸小话不多 | 来源:发表于2018-07-02 16:27 被阅读40次
HTML结构,对应上面的三个种类 

点击上面的盒子,对应显示下面的盒子,其他兄弟元素隐藏。这种写法比较适合类目少的情况使用。

类目多的话,建议下面用一个盒子。点击就获取点击元素的id,在发送请求获取相应的数据就好

下面贴点击tab栏展示对应的盒子,

我这里上拉加载用jq插件,这个插件第一次进入页面会自动加载一次

调用dropload方法,把ajax请求协助里面

这里只列了点击之后的请求

页面进来之后,显示的盒子应该先请求一次,也就是不点击的情况下。

所以在上面先调用一次dropload就好啦,

下面再根据逻辑来加载。

PS:ajax方法封装后使用会比较简洁,直接传参,代码就没有那么长啦

相关文章

  • 带tab栏上拉加载

    点击上面的盒子,对应显示下面的盒子,其他兄弟元素隐藏。这种写法比较适合类目少的情况使用。 类目多的话,建议下面用一...

  • vue项目 mescroll 插件--tab栏切换+下拉刷新

    前提:使用vue-cli搭建的vue项目功能: 实现tab栏切换+上拉加载+下拉刷新mescroll官网:http...

  • 若依框架使用

    1、若依vue切换tab页签时页面保持不重新加载需求:页面板块打开后,切换Tab栏各页面,页面不重新加载,保持原样...

  • flutter下拉刷新、dio网络请求、fishredux实战

    本文flutter实现了常用的页面 1、下拉刷新,上拉加载,自定义header 2、tab页 + ScrollVi...

  • 在vant框架中使用tab和list组件搭配使用的问题

    list上拉加载在tab切换的时候,第二次list就不执行获取数据的接口解决办法:在tab切换的时候做一个初始化t...

  • 微信小程序

    setData字符串拼接 图片预览wx.previewImage使用 小程序TabBar栏的显示和隐藏 上拉加载 ...

  • 常用技巧

    上拉加载,下拉刷新,导航栏渐变 常用的宏,UIView的延展 iOS利用iTunesLookup检查更新 一些代码...

  • 面向对象实战

    1.封装一个轮播组件 轮播组件效果 2.封装一个曝光加载组件 曝光组件效果 3.封装一个 Tab 组件 Tab栏切...

  • element-ui Memo

    级联选择器懒加载 tab栏 el-date-picker 日期禁用 elementui 合计行合并单元格 利用sp...

  • TouchSlide、Swipper 开发笔记

    bug:tab栏切换中TouchSlide、swipper失效 原因 :tab栏切换隐藏了TouchSlide或者...

网友评论

      本文标题:带tab栏上拉加载

      本文链接:https://www.haomeiwen.com/subject/ourluftx.html