http://erehmi.cnblogs.com/

所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图):

  • 采用上下分页的模式
  • 商品基本参数 & 选购参数在上页展示
  • 商品图文详情等其他信息放在下页展示

知识要点

  1. 垂直方向的ViewPager, git: castorflex/VerticalViewPager
  2. 手势拦截 & 处理

实现思路

  1. 上下分页的设计完全可以用垂直分页来实现, 见知识要点[1]
  2. 如果使用垂直分页来实现, 那么问题就来了: 上下分页中的内容肯定是支持垂直滚动的, 如此就会和ViewPager的手势冲突, 因此, 上下分页内容的最外层视图(暂且叫作ContentContainer)必须要处理手势, 即在垂直滚动内容时必须告知ViewPager, 当前状态的ContentContainer是否可滚动. p.s.少数View是已经处理了上述手势问题的, 但是, 像ListView, ScrollView都是没有处理的. 具体处理方式可以参考: android.support.v4.widget.NestedScrollView
  3. 建议: 上页部分可以采用ListView来实现, 扩展性更好. 不推荐使用ScrollView来实现.
  4. 其他UI细节, 不在此赘述.

END.

http://erehmi.cnblogs.com/

Android开发案例 - 淘宝商品详情【转】的更多相关文章

  1. Android开发案例 - 淘宝商品详情

    所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等其他信息放在下页展示 知识要点 垂直方向的ViewPa ...

  2. iOS app url scheme跳转到淘宝商品详情页 唤醒app

    最近涉及的一个业务,在app内的一个广告,点击打开webView,加载的是一个淘宝商品详情页,效果是打开该webView自动跳转至淘宝对应的页面,同时在自己的app仍然加载页面,点击评论等也同样能跳转 ...

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

    新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将 ...

  4. Vue实现仿淘宝商品详情属性选择的功能

    Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:   attrA ...

  5. android仿京东、淘宝商品详情页上拉查看详情

    话不多说,直接上干货,基本就是一个scrollview中嵌套两个scrollview或者webview;关键点事处理好子scrollview和父scrollview的触摸.滑动事件已达到想要的效果.大 ...

  6. 第十二篇、OC_仿淘宝商品详情页的翻页

    // // GFBProductViewController.m // elmsc // // Created by MAC on 2016/11/26. // Copyright © 2016年 G ...

  7. 仿京东淘宝商品详情页属性选择js效果

    在网上找了好久发现都不符合要求就自己摸索写了一个,用到了linq.js这个linq to js 扩展,不然用纯JS遍历json查询要死人啊 demo:http://123.207.28.46:8086 ...

  8. vue实现淘宝商品详情页属性选择功能

    方法一是自己想出来的,方法二来自忘记哪里看到的了 不知道是不是你要的效果: 方法一:利用input[type="radio"] css代码: input { display: no ...

  9. iOS 相似淘宝商品详情查看翻页效果的实现

    基本思路: 1.设置一个 UIScrollView 作为视图底层,而且设置分页为两页 2.然后在第一个分页上加入一个 UITableView 而且设置表格可以上提载入(上拉操作即为让视图滚动到下一页) ...

随机推荐

  1. Sublime text 安装Package Control

    Package Control 插件是一个方便 Sublime text 管理插件的插件,但因为 Sublime Text 3 更新了 Python 的函数,API不同了,导致基于 Python 开发 ...

  2. E20180408-hm

    interaction  n. 互动; 一起活动; 合作; 互相影响; interface n. 界面; <计>接口; 交界面;   v. (使通过界面或接口) 接合,连接; [计算机] ...

  3. python __builtins__ set类 (60)

    60.'set',  转换为集合类型 class set(object) | set() -> new empty set object | set(iterable) -> new se ...

  4. python 生成器 generator

    一.生成器定义 通过列表生成表达式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.所以,如果列表元素可以按照某种算法推算出来,那我们是否可以在循环的过程中不断推算出后续的元素呢? ...

  5. bzoj 2023: [Usaco2005 Nov]Ant Counting 数蚂蚁【生成函数||dp】

    用生成函数套路推一推,推完老想NTT--实际上把这个多项式乘法看成dp然后前缀和优化一下即可 #include<iostream> #include<cstdio> using ...

  6. 洛谷P3825 [NOI2017]游戏(2-SAT)

    传送门 果然图论的题永远建图最麻烦……看着题解代码的建图过程真的很珂怕…… 先不考虑地图$x$,那么每一个地图都只能用两种赛车,于是我们可以用2-SAT来搞,用$i$表示这个地图能用的第一辆车,$i' ...

  7. 2019 年 Vue 学习路线图!

    如果你是 Vue 开发新手,可能已经听过很多行话术语,比如单页面应用程序.异步组件.服务器端渲染,等等.你可能还听说过与 Vue 有关的一些工具和库,比如 Vuex.Webpack.Vue CLI 和 ...

  8. 「软件」仿站小工具v9.0

    仿站小工具是通过网址下载静态网页的工具.从输入的网址下载html代码,提取出JS.Css.Image.Picture.Flash等静态文件网址,再从下载完好的Css代码中提取出Image静态文件网址, ...

  9. hdu1102 Constructing Roads 基础最小生成树

    //克鲁斯卡尔(最小生成树) #include<cstdio> #include<iostream> #include<algorithm> using names ...

  10. Swift typealias associatedType

    使用typealias为常用数据类型起一个别名, 一方面更容易通过别名理解该类型的用途, 另一方面还可以减少日常开发的代码量. typealias使用实例: // 网络请求常用回调闭包 typeali ...