仿淘宝商品详情页上拉弹出新ViewController

简介:

新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下。

1.需求

1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上

2.显示B视图时下拉时,有刷新效果,之后将A回到原处,B向下

3.A视图再次上拉时,能看到B视图,拉到一定距离时,和1一样A、B向上

2.思路

刚看到时,我是想到我们小区宝2.0的登录弹出效果,想着A向上滑动一定距离时A、B向上,B向下滑动时让A、B向下滑动,实现了之后和小伙伴讨论了一下,发现了一些细节这样是实现不了的,就是A上拉时可以看到B,所以这个就不行了。于是就想着根据A滑到底部后的偏移量让B也随着向上,可是问题又来了,由于TableView会回弹,这样到一定距离A、B向上弹之后B又回到原来位置或者弹出之后会回弹到底部之后再向上弹出。昨天让小伙伴看了下,今天oliver把这给解决了, 前面之所以不行是由于tableView回弹,可以通过设置tableView的contentInset填充底部https://github.com/ywcui/TM,感觉效果挺不错。自己昨天夜里下班也一直想这个问题,想着能不能用ScrollView实现,就自己试了下,也实现了这样的功能。https://github.com/ywcui/TaoBao

3.遇到的问题

1.ScrollView的contentSize、contentOffset、contentInset的区别没理清楚

2.ScrollView代理的执行顺序拖拽、滑动的顺序没理清楚

3.其次分析问题自己还是太急,不能冷静下来认真分析,一步一步的思考,之前也意识到了这个问题,一直想着改变

相关文章
|
6月前
|
存储 JavaScript 前端开发
订水商城实战教程10-宫格导航
订水商城实战教程10-宫格导航
|
2月前
|
移动开发
H5页面及店铺分享带图简介
H5页面及店铺分享带图简介
|
4月前
|
小程序
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
65 0
|
4月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
42 0
|
开发者
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
256 0
|
SQL 前端开发 测试技术
显示勾选的购物车数据【项目 商城】
显示勾选的购物车数据【项目 商城】
73 0
|
小程序 JavaScript
微信小程序商品筛选,侧方弹出动画选择页面
微信小程序商品筛选,侧方弹出动画选择页面
190 0
|
移动开发 定位技术 API
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
549 0
|
小程序 JavaScript 定位技术
小程序里显示店铺地址,可在地图上查看,可点击导航到店铺
小程序里显示店铺地址,可在地图上查看,可点击导航到店铺
242 0