在1.0时还需要借助第三方UIkit库实现，现在已经不用了
TabView，不仅可以用作地步导航栏切换页面，同时也可以实现顶部tab页面切换
使用官方的方式可以实现图标与文字的tabbar，顶部tabbar就要自己配合实现了
TabView(selection: $selectTab){
OrderChildView(order:orderData,type:"")
.tag("全部")
OrderChildView(order:orderData,type:"common")
.tag("普通扫码")
OrderChildView(order:orderData,type:"coupon")
.tag("优惠券")
OrderChildView(order:orderData,type:"easily")
.tag("顺手购")
OrderChildView(order:orderData,type:"integral")
.tag("积分兑换")
}
.tabViewStyle(.page(indexDisplayMode: .never))
.tabViewStyle(.page(indexDisplayMode: .never)) 这一句是关键代码，是我们要实现必须写的
这时，需要使用VStack在tabView上面加上一个横向滚动的tabbar
private let tabList = ["全部","普通扫码","优惠券","顺手购","积分兑换"]//这里可以自定义，我这边需求是这样的
VStack{
ScrollViewReader { tabRead in
ScrollView(.horizontal,showsIndicators: false){
HStack{
ForEach(tabList,id:\.self){ item in
Spacer()
Text(item)
.font(.system(size:15))
.padding(15)
.foregroundColor(selection == item ? Color.init(red: 1, green: 0.76, blue: 0.16) : .white)
.onTapGesture {
print(item)
withAnimation (.easeInOut){
selection = item
}
}
.id(item)//这里必须添加id，为了跟随页面滚动tabbar，当然如果需求不需要，可以不加
Spacer()
}
}
}
.onChange(of: selection) { newValue in
tabRead.scrollTo(newValue as String?)
}
}
TabView(selection: $selection){
OrderChildView(order:orderData,type:"")
.tag("全部")
OrderChildView(order:orderData,type:"common")
.tag("普通扫码")
OrderChildView(order:orderData,type:"coupon")
.tag("优惠券")
OrderChildView(order:orderData,type:"easily")
.tag("顺手购")
OrderChildView(order:orderData,type:"integral")
.tag("积分兑换")
}
.tabViewStyle(.page(indexDisplayMode: .never))
}
ScrollViewReader 配合ScrollView可实现，让视图滚动到你想要的位置，关键代码 tabRead.scrollTo(newValue as String?)
这样就可以轻松实现我们需要的样子了
IMG_0042.PNG
网友评论