ReactNative实现轮播图

Posted 2023-05-12

参考技术A 先看App运行效果:

react-native中有专门实现轮播图的模块Swiper,和引入React的方式一样,通过import方式引入:

轮播图上方的标题'狗狗的家',用Text控件实现.由于render方法中不能同时返回多个控件,所以需要将Swiper和Text通过一个View来封装.

轮播图中的狗,猫,熊三张图片都是通过网络异步加载,通过添加isShow属性来对网络加载结果进行不同渲染,请求成功后,才进行Swiper控件的渲染.

其中items用来存放图片的地址.
在componentDidMount方法中添加图片地址,并通过setState方法,重新调用控件的render方法:

详细请参看 Demo

喜欢和关注都是对我的支持和鼓励~

使用vue实现轮播图

参考技术A 1.安装依赖

npm i swiper@5 --save

npm i vue-awesome-swiper@3 --save

版本不过高

2.在main文件里全局引入轮播图和css同时使用Vue.use来注册一个轮播图插件

3。在自己的组件文件夹中新建一个轮播图组件MySwiper.vue

4.把组件引用到app.vue文件中去并使用