🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[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)