待办事项下拉html代码,SRM移动应用之待办事项模块

前言

对于使用angular开发的攻程师们来说,升级是一件非常痛苦的事情。AngularJS最大版本号只有1.x,2.x/4.x的版本号都是针对于全新的框架Angular,不向后兼容导致要花费大量的时间去研究,害苦了前端攻程师们,真后悔做了前端。

需求

先看一下效果图

a84d45625c86

场景描述:

1. 头部tab标签页可以添加多个,且每一个tab也对应自己的显示区域。

2.tab标签页可以左右滑动。且当点击每一页的最后一项是可以滑动定位到下一页。

2.每一个tab区域实现上拉刷新,下拉加载。实现收藏,以及取消收藏。

实现思路

1.定义一个model变量存放与tabs标签相关的数据源.

2.每一个tab标签对应的属性有{请求的URL,标签名称,是否存在数据,是否选中tab,是否还有请求的数据,查询的参数,请求的结果,上拉刷新回调函数,及下拉加载的回调函数}

3.定义上拉刷新,下拉加载的公共函数。

4.对每一个tab标签页采用组件化处理

5.tabs标签页采用组件化处理。

代码的实现

1.定义一个待办事项的服务组件处理待办中的业务逻辑, 获取tabs配置代码如下:

a84d45625c86

1.待办事项的服务组件之上拉刷新,下拉加载

a84d45625c86

a84d45625c86

3.待办事项的服务组件之tab标签页的实现:(实现方式采用ionic3框架自带的ion-slide指令实现)

a84d45625c86

4.待办事项的服务组件之每一个tab标签页组件化处理实现:

a84d45625c86

4.待办事项模板主页的实现:

a84d45625c86

总结:

虽然以上的需求并不是很复杂,但是由于对ng4框架不熟悉,以及ionic3框架了解的不多,导致走了不少弯路。历经千辛万苦终于实现了。也算是最大的欣慰吧。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值