[toc]
# 需要使用到的组件
![](https://img.kancloud.cn/1c/9a/1c9a84a23e6447be07af78d1d986b8ff_1228x878.png)
# 三列左右 滑动
## 基本功能
需要使用 `ViewPager` 组件实现。
![](https://img.kancloud.cn/a8/8f/a88f7193c7f6031ac21442cc62e2e4e1_1746x1492.png)
## 放三个按钮
![](https://img.kancloud.cn/84/52/8452662afb29eae9b04e778390e067b5_1884x620.png)
三个按钮样式:
![](https://img.kancloud.cn/df/9c/df9c611b519dd094b530f3dae45ad731_536x356.png)
## 点击三个按钮时滑动框
![](https://img.kancloud.cn/3b/27/3b27fc4335f1bfb4cbceff16a8c8c0ad_1820x1584.png)
## 选中按钮的样式
1. 先定义一个选中时的样式
![](https://img.kancloud.cn/32/5d/325dc5e2b24b1997d68f2b9a37a453b8_1028x478.png)
2. 定义一个变量,通过这个变量保存当前被选中的框的下标
![](https://img.kancloud.cn/61/83/6183cf23af5b8123ba1c62f739e30e58_1506x1514.png)
3. 根据这个变量来判断在哪个按钮上添加选中的样式
![](https://img.kancloud.cn/ad/ed/aded1c99f8c718b734ccf59a3e39d2bf_1374x1182.png)
## 滑动框时同步更新按钮状态
当滑动切换时,按钮也应该同步切换。
![](https://img.kancloud.cn/a4/cd/a4cdad1a1db45af3004aaa30abe14f72_1018x642.png)
## 黄线跟着滑动
### 画一个黄线
![](https://img.kancloud.cn/2b/a4/2ba4df163cf75193387da2873b4aa11e_1896x566.png)
### 制作动画
动画原理修改 left 的值,这个值有三种情况:
left: '0%' :最左边
left: '33.333333%' :中间
left: '66.666666%' : 右边
1. 定义一个变量,用来黄线的位置
![](https://img.kancloud.cn/e9/25/e925fb51eb0f9a68ba4acbeec57d4875_1538x696.png)
2. 把这个变量绑定到组件的 left 上
![](https://img.kancloud.cn/aa/4a/aa4a8995a562b3c0d5ff677b6141c62e_1058x688.png)
3. 每当当前选中的下标发生改变时执行动画,所以需要添加一个类似监听器的功能监听当前下标,当下标改变时,就滚动到这个下标
![](https://img.kancloud.cn/23/48/23483d2f4befbae0e4e439d1cc7a11c4_1600x964.png)
# 使用 FlatList 实现三列的列表
![](https://img.kancloud.cn/04/4c/044c087f4e522b83f5a53648ba89a149_1610x964.png)