仿京东商品详情轮播图

作者: 健健锅 | 来源:发表于2016-08-16 10:22 被阅读1528次

好久没有更新啦,今天来搞一个京东的轮播:直接上效果


8月-16-2016 09-38-10.gif 8月-16-2016 09-37-17.gif

如果想真实体验可以去京东APP体验一下.
描述一下效果,向左滑动时,右边的图片从底下出来 而且是一半的位置
同理向右滑动也是 .那么怎么实现呢
先搞一个collectionview 做一个不同的轮播,然后在视图的最上层放一个imageview 上面呈现当前的图片,这个是 图片一 图片二放的是上一张图片把它放图片一 和轮播之间位置是 图片二的终点 是图片一的x = 0 处.这样当滑动轮播时,图片一的偏移量 和轮播的偏移量相同就好,图片二的偏移量是轮播的偏移量/2.0 这样就会好. 当然反方向相同. 这是描述 具体操作还是需要修改一些 具体下载代码查看 就不一一解释啦 当然如果感兴趣还是亲自动手来一下在. 这是他的图层关系:


A27281B2-7C2A-4BD8-AF09-D5976720C9D5.png

二. 第二个效果


8月-16-2016 09-55-46.gif

1.效果描述
可以看到当页面向下滑动时,轮播页面一直处于居中状态且大小不变.
页面向上滑动时,轮播页面隐藏在底部图层.
2.实现方式.
首先确定这个轮播安放的位置是 tableview的tablehand.然后 把它的当让 前提是 他表头上面有一个view 随着 表的滑动frame 也改变 而 轮播就放在这个view上面,并且centerY相等.
再有就是 让这个轮播的图层插入最顶层.

三 细心地会发现右下角有一个角标动画 ,很简单,我就不解释啦 不贵最好还是实现已下载这样有利于学习啊.
具体代码就不写啦 可以下载看看(里面还有部分其他内容)
https://git.oschina.net/GAOZEJIAN/JDbanner.git

相关文章

  • 仿京东商品详情轮播图

    好久没有更新啦,今天来搞一个京东的轮播:直接上效果 如果想真实体验可以去京东APP体验一下.描述一下效果,向左滑动...

  • UI仿写

    Android 仿京东、天猫 app 的商品详情页的布局架构, 以及功能实现 仿京东、天猫 app 的商品详情页自...

  • 仿京东天猫商品详情页

    1.参考借鉴 Android仿京东商品详情页上拉查看图文详情 模仿淘宝、京东、蘑菇街商品详情页,可嵌套ListVi...

  • Android交互

    仿淘宝、京东拖拽商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhos...

  • webview

    仿淘宝、京东拖拽商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhos...

  • Android列表,嵌套滑动

    仿淘宝、京东拖拽商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhos...

  • 商品详情

    商品详情页面 主要结构,商品图片的轮播图,商品购买区域,商品参数区域 使用mui-card样式构建商品详情界面的三...

  • 现金红包

    每日红包 轮播图 详情图 周末红包 轮播图 详情图 圣诞红包 轮播图 详情图

  • django-rest-framework(实战篇)——商品详情

    商品详情页接口 左侧商品轮播图 商品详情:描述,运费,库存量 热门商品放在另外一个url goods/views....

  • 简析采购平台对账功能

    一、流程图 二、功能架构 三、接口支持 1、京东的商品订单详情接口,用于对账单详情页展示商品详情使用 2、抓取京东...

网友评论

本文标题:仿京东商品详情轮播图

本文链接:https://www.haomeiwen.com/subject/jrkpsttx.html