🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### 滑动组件就是设置滑动样式的组件。点击“![](https://img.kancloud.cn/e4/c1/e4c19480b992403fd3f915b50779c1f7_28x27.png)”图标,再点击“滑动组件”,即可创建新的滑动,如图4.41; ![](https://img.kancloud.cn/9a/f6/9af60cc2f287161a643d1f0c8027a3b6_717x355.png) ![](https://img.kancloud.cn/ef/e6/efe6ee2f0a5761af04f01c9026c61818_803x35.png) ## **一、组件名称设置** ### 选中该滑动组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图4.42。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/95/2b/952b95fa8044fd41ff79dad6af378857_932x624.png) ![](https://img.kancloud.cn/00/a3/00a34e18042532c88c10a828fd28cb16_801x50.png) ## **二、接口设置** ### 1\. 数据类型 ### 数据类型分为静态数据和动态数据; * ### 静态数据:写死的数据; * ### 动态数据:会随着接口传过来的数据实时变化;(一般这种比较常用) ### 2\. 接口地址 ### (1)静态数据,接口地址传过来的内容要符合以下格式: ~~~ [{"value":"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"},{"value":"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4238142487,3274484296&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2394972844,3024358326&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"},{"value":"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4238142487,3274484296&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2394972844,3024358326&fm=26&gp=0.jpg"},{"value":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVq8ZVBlQLcZMHXjm21FMbF4oMmyCucZZav2s_wcd_Wkosp4060g&s"},{"value":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4QJcBTHThqzbA9Of6HzW2i1apf5k2i2iIaQQPLR0UT2AOH7ke&s"}] ~~~ ### (2)动态数据,接口地址传过来的内容要符合以下格式: ~~~ {"data":[{"value":"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"},{"value":"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4238142487,3274484296&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2394972844,3024358326&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"},{"value":"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4238142487,3274484296&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2394972844,3024358326&fm=26&gp=0.jpg"},{"value":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVq8ZVBlQLcZMHXjm21FMbF4oMmyCucZZav2s_wcd_Wkosp4060g&s"},{"value":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4QJcBTHThqzbA9Of6HzW2i1apf5k2i2iIaQQPLR0UT2AOH7ke&s"}]} ~~~ ### 3\. 刷新时间 ### 这个参数主要针对动态数据设置的,完成数据的实时更新。 * ### 如果你想设置成5秒刷新一次,可以将刷新时间设置成“5000”; ### 4\. 刷新数据 ### 这个参数主要是重新请求以下接口,完成数据的更新。 ![](https://img.kancloud.cn/af/2e/af2e6973e668ff837e39369bef620e4d_1068x768.png)