这是一个简单的示例，只有两个简单的样式，因为目前我个人只用得到两个，需要的可以自己添加。

bottom，下划线模式

Mar-14-2022 10-09-39.gif

cover，覆盖模式

Mar-14-2022 10-15-24.gif

整体思路

头部

采用preference onPreferenceChange GeometryReader 三者结合的方式，获取到每一个子选项的坐标，然后根据点击选项，移动滑动器的位置到对应的选项。
这三个的联动使用算是比较常见的，感兴趣的可以搜一下，这个还是好搜索的，下面这个给我的印象比较深刻有趣
一个有趣的preference使用解说示例

页面

         TabView(selection: $selectedIndex){
            content()
         }
         .tabViewStyle(.page(indexDisplayMode: .never))

这里采用了TabView，这个分页控制不仅仅能用于整体UI框架，也能做展示的分页。他也有好几种样式，这里采用的是

.tabViewStyle(.page(indexDisplayMode: .never))

小结

整个示例代码还算简介明了，算是给像我一样学习中的孩子一个指引，毕竟一搜好多付费文章实在让人伤心。

github传送门

学习使人快乐，愿学习代码不会使你彷徨。

2022-3-18 追加经验
在demo中，可以看到在使用FSPageView时，我采用的是

     ForEach(0..<5){ i in
        FSPageDetailView(name: names[i])
           .background(Color.blue)
           .tag(i)

的布局方式，实现了效果。然而，当我使用

      ForEach(viewModel.list,id: \.key) { item in }

的布局方式时，无法实现demo效果，原因是selectedIndex这个绑定的选中索引不会发生变化，它的改变也不会引起TabView的内容变化，我很确认第二种布局的tag设置是非常正确的。并且，在我第一次发现这个问题时，出现的现象并不是selectedIndex无响应，而是TabView的索引值是从1开始的，当然我当时的布局依赖的模型数组是有id字段的，id字段是Int类型，或许是跟这个有关吧。