React-native 小计第一天(筛选栏的实现)
2017-07-21 本文已影响650人
饭后的甜点_
第一天我们大概要实现的效果是这样的直接上图.因为最近做的项目是类似于电商的,所以要实现筛选功能,大体和某宝的筛选销量和尺寸相同的功能. (哈哈哈. 我就想笑)..
筛选图片1做什么功能我们都要简单分析一下,才能知道如何下手 .
.思路
1. 首先 我们需要做上方选项栏 有综合排序 , 地区选择 等等 3个选项卡按钮
2.底部滑动视图 , 点击不同选项卡 切换数据
3. 点击时 选项卡效果 (字体颜色, 小三角方向)
4.大功告成 !
.步骤
1. 首先我们先写一个底部可以滑动的视图
头部这个是JS文件的头我们需要引入这些.剩下的代码如下
底部滑动栏图1 底部滑动栏图2 底部滑动栏图3 底部滑动栏图4以上代码是公司大牛写的,我是借鉴而来 毕竟我是初来炸道(╯‵□′)╯炸弹!
然后 外界写上方选项卡布局, 和调用这个滑动栏 , 直接上代码
最后的布局 你们自己写吧 我懒得贴上去了,,, 然后大功告成! 第一天小计