ionic 滑动菜单实现(segment + swiper)

曾经使用过ionic提供的segment + slides 实现,无奈滑动的时候总感觉有点问题,后来改用swiper代替slides,用起来感觉不错。


1. swiper官网地址

http://www.swiper.com.cn/api/index.html

2. 下载swiper

http://www.swiper.com.cn/download/index.html

3. 导入到项目

ionic 滑动菜单实现(segment + swiper)_第1张图片

4. 初始化

4.1 初始化segment 


ionic 滑动菜单实现(segment + swiper)_第2张图片

在对应的ts中

设置默认选择第一个


ionic 滑动菜单实现(segment + swiper)_第3张图片

4.2 初始化swiper


ionic 滑动菜单实现(segment + swiper)_第4张图片
ionic 滑动菜单实现(segment + swiper)_第5张图片

当页面滑动时,改变segment的值

当用segment 进行切换时,切换swiper页面。如果不使用分页懒加载,请忽略判断代码


ionic 滑动菜单实现(segment + swiper)_第6张图片

5. 效果


你可能感兴趣的:(ionic 滑动菜单实现(segment + swiper))