我们的思路应该就是一个主界面 上面三个button,一个button下面的underline.这个underlines随着上面三个按钮的点击进行滑动

同时切换三个页面
三个页面左右滑动的同时 underline也会随着滑动到相应的button下
好,废话不多说 我们开始
首先创建三个按钮和underView

由于我们主界面需要三个界面来回滑动 那么我们放一个scrollview

然后需要在scrollview上添加三个控制器controller或者三个view,考虑到我们需要请求数据 所以这里我们用controller比较好.
嘛,名字我们就不纠结了

好了 基础的东西我们都有了.
那么首先的一步就是点击button的点击事件
这里我们需要一个block来应对各种情况 需要传值的情况
但是这里我们可以不需要 但我们还是这么写 因为在一个控制器里使用的情况很少

在viewdidload里实现以下这个block

点击button的方法

在这里我们根据button.tag遍历出button数组中选中的button,让underline的中心等于选中button的中心 添加一个动画让他滑动
然后在将这个选中tag作为selectedBlock的参数传入
现在我们这个scrollview就跟着button随动了
然后我们要处理的就是滑动scrollview

设一个page值 用scrollview的偏移量来除屏幕宽度得出一个数值,由于scrollview的偏移量是随动的,因此用这个page 来关联 underview.x的值 来完成联动
同时最后把选中类型变为 page=tag 来更新btn 的选中状态
网友评论