10 发现页面轮播图UI组件封装(Swift)

2023-06-20  本文已影响0人  flyfishcxy

不知到大家在软件开发过程中,一般在App首页顶部view都显示轮播图广告,把最近点击率最好的活动放在首页吸引用户眼球,然后发起点击轮播图操作到对应的商品详情页,然后完成下单支付操作到订单过程。

那么话不多说,我们开始来详细描述发现页面轮播图UI组件开发实现过程:

1 从服务端发起请求获取网络动态轮播图返回的数据

在DiscoveryController发现VC里面创建loadData函数,并在loadData函数里面调用DefaultRepositroy的bannerAds轮播图网络请求函数,将服务端返回的结果存储BannerData数据模型里面。在initDataNum初始化函数调用loadData。

loadData函数获取轮播图数据

2 在发现列表创建BannerCell,在cell添加1个label测试

创建BaseTableViewCell 封装cell的初始化UI和数据绑定的方法和自动高度设置的方式

BaseTableViewCell

创建轮播图BannerCell继承BaseTableViewCell,并创建1个labe测试是否能添加在轮播图上

BannerCell

3 利用YJBannerView开源框架实现轮播图UI和Data的绑定

引入YJBannerView的源码到工程项目目录里面,设置轮播图BannerCell布局--container的内边距+比例尺+圆角+占位图+颜色,并添加绑定服务端数据的方法bind

YJBannerView初始化 YJBannerView代理函数实现

在发现VC数据源回调函数调用BannerCell

4 实现轮播图点击功能 -- 用block实现

定义1个BannerCell点击的block的回调函数bannerClick

实现YJBannerView的didSelectItemAt轮播图点击的回调函数

在发现DiscoveryController里面的tableview列表的 cellForRowAt函数实现cell的block回调函数

声明processAdClick轮播图函数并实现相应跳转H5网页预留接口

运行进行点击测试截图

5 运行模拟器测试看效果 

总结:

看着一个很小的轮播图组件其实背后隐藏着很深的交互行为,当然点击了不下单只是增加了用户埋点的数量,但是这样也能给用户提供相关的数据进行分析用的行为。

上一篇 下一篇

猜你喜欢

热点阅读