working double carousel decent
This commit is contained in:
@@ -30,50 +30,70 @@ struct ChatsCarouselView: View {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var mainCarouselView: some View {
|
var mainCarouselView: some View {
|
||||||
TabView(selection: $selectedUserId) {
|
VStack {
|
||||||
ForEach(viewModel.carouselUsers) { carouselUser in
|
TabView(selection: $selectedUserId) {
|
||||||
GeometryReader {proxy in
|
ForEach(viewModel.carouselUsers) { carouselUser in
|
||||||
let minX = proxy.frame(in: .global).minX
|
GeometryReader {proxy in
|
||||||
let scale = getScale(proxy: proxy)
|
let minX = proxy.frame(in: .global).minX
|
||||||
|
let scale = getScale(proxy: proxy)
|
||||||
Image(carouselUser.profilePictureUrl)
|
|
||||||
.renderingMode(.original)
|
Image(carouselUser.profilePictureUrl)
|
||||||
.resizable()
|
.renderingMode(.original)
|
||||||
.aspectRatio(contentMode: .fit)
|
.resizable()
|
||||||
.clipShape(Circle())
|
.aspectRatio(contentMode: .fit)
|
||||||
.shadow(radius: 10)
|
.clipShape(Circle())
|
||||||
.rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0))
|
.shadow(radius: 10)
|
||||||
.blur(radius: abs(minX) / 40)
|
.rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0))
|
||||||
.scaleEffect()
|
.blur(radius: abs(minX) / 40)
|
||||||
.padding(50)
|
.scaleEffect()
|
||||||
|
.padding(50)
|
||||||
|
}
|
||||||
|
.frame(width: UIScreen.main.bounds.width)
|
||||||
|
.tag(carouselUser.id)
|
||||||
}
|
}
|
||||||
.frame(width: UIScreen.main.bounds.width)
|
|
||||||
.tag(carouselUser.id)
|
|
||||||
}
|
}
|
||||||
}
|
.tabViewStyle(.page(indexDisplayMode: .never))
|
||||||
.tabViewStyle(.page(indexDisplayMode: .never))
|
.padding(.top, 50)
|
||||||
.padding(.vertical, 60)
|
.onAppear {
|
||||||
.overlay(
|
self.selectedUserId = self.viewModel.carouselUsers.first?.id ?? ""
|
||||||
ScrollViewReader{proxy in
|
}
|
||||||
|
|
||||||
|
ScrollViewReader {proxy in
|
||||||
ScrollView(.horizontal, showsIndicators: false) {
|
ScrollView(.horizontal, showsIndicators: false) {
|
||||||
HStack(spacing: 15) {
|
HStack {
|
||||||
ForEach(viewModel.carouselUsers) {user in
|
ForEach(viewModel.carouselUsers) {user in
|
||||||
|
let isSelected = user.id == self.selectedUserId
|
||||||
|
// let isLeftOrRight = !isSelected &&
|
||||||
|
|
||||||
Image(user.profilePictureUrl)
|
Image(user.profilePictureUrl)
|
||||||
.resizable()
|
.resizable()
|
||||||
.aspectRatio(contentMode: .fill)
|
.aspectRatio(contentMode: .fill)
|
||||||
.frame(width: 70, height: 60)
|
|
||||||
.cornerRadius(12)
|
.cornerRadius(12)
|
||||||
|
.clipShape(Circle())
|
||||||
|
.shadow(radius: 10)
|
||||||
|
.scaleEffect(isSelected ? 1.2 : 1)
|
||||||
|
.padding(.all, 16.0)
|
||||||
|
.id(user.id)
|
||||||
|
.onTapGesture {
|
||||||
|
withAnimation {
|
||||||
|
self.selectedUserId = user.id
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.padding()
|
.frame(maxHeight: 100)
|
||||||
|
.padding(.leading, UIScreen.main.bounds.width * 0.4)
|
||||||
|
.padding(.vertical, 20)
|
||||||
}
|
}
|
||||||
.frame(height: 80)
|
.onChange(of: self.selectedUserId) { _ in
|
||||||
.background(Color.blue)
|
withAnimation {
|
||||||
},
|
proxy.scrollTo(self.selectedUserId, anchor: .bottom)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
alignment: .bottom
|
Spacer()
|
||||||
)
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//the bottom navigation of the small profile pictures
|
//the bottom navigation of the small profile pictures
|
||||||
|
|||||||
Reference in New Issue
Block a user