working double carousel decent

This commit is contained in:
talksik
2021-12-12 00:56:04 -08:00
parent e912a32e7f
commit dea82938a8
@@ -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