React-native 小计第一天(筛选栏的实现)

2017-07-21  本文已影响650人  饭后的甜点_

第一天我们大概要实现的效果是这样的直接上图.因为最近做的项目是类似于电商的,所以要实现筛选功能,大体和某宝的筛选销量和尺寸相同的功能.  (哈哈哈.  我就想笑)..

筛选图片1

做什么功能我们都要简单分析一下,才能知道如何下手 . 

.思路

1. 首先 我们需要做上方选项栏 有综合排序 , 地区选择 等等 3个选项卡按钮

2.底部滑动视图 , 点击不同选项卡 切换数据 

3. 点击时 选项卡效果 (字体颜色, 小三角方向)

4.大功告成 ! 

.步骤

1. 首先我们先写一个底部可以滑动的视图 

头部

这个是JS文件的头我们需要引入这些.剩下的代码如下

底部滑动栏图1 底部滑动栏图2 底部滑动栏图3 底部滑动栏图4

以上代码是公司大牛写的,我是借鉴而来 毕竟我是初来炸道(╯‵□′)╯炸弹!

然后 外界写上方选项卡布局, 和调用这个滑动栏 , 直接上代码

最后的布局 你们自己写吧 我懒得贴上去了,,, 然后大功告成!   第一天小计

上一篇下一篇

猜你喜欢

热点阅读