【Angular】——BootStrap+Swiper实现手机端滑动窗口

前端之家收集整理的这篇文章主要介绍了【Angular】——BootStrap+Swiper实现手机端滑动窗口前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

经过大家的努力,滑动效果实现了~~~哈哈哈!!

做出来了,才觉得,这么简单......但建议:若做移动端可以选择Ionic或者mui。他们更针对移动端,封装的内容也比较丰富。

博客标题叫BootStrap+Swiper实现手机端滑动窗口,但其实和bootstrap没有任何关系,只是因为Boostrap没有滑动效果,才加入了Swiper。它们结合在一起,完美的实现了项目中的需求......(如下图,滑动屏幕,显示下一题)



回归正题,既然项目选定了Bootstrap,又要实现移动端滑动效果,遇到问题去解决就是了。过程中几个小师弟给了很大的助攻。

确定bootstrap没有此效果,便开始找能实现滑动效果插件,最后锁定Swiper。

其实它的官网上有详细的介绍(为了兼顾更多人,我就放中文文档了):Swiper中文文档

但这些教程是针对html、js的。如何放入我们的Angular2呢。大同小异,因为ts本质也是js,所以没有太大差别。在此将源码分享,希望节省一些有同样问题的同事的时间。

引入swiper.min.css

放入项目中:我放在了和bootstrap的css文件中。


然后在项目的index.html中引入:

 href="assets/bootstrap-3.3.7-dist/css/swiper.min.css" rel="stylesheet">
最后,在相应的组件中应用即可:



HTML中有这三个div。并在第三个div内放入你想要实现滑动的div

然后在ts中补充:



OK!这样滑动效果就实现了。另:Swiper还有很多其他样式滑动效果,可以参考官方文档选择最适合自己项目的滑动效果

另:class=swiper-slide的div样式可以设置为

overflow: scroll(overflow超出部分如何处理。scroll:添加滚轮。hidden:超出部分隐藏,即不显示

其外层设置为

overflow: hidden
可以实现根据 纵向内容的多少决定是否可以滑动。

猜你在找的Angularjs相关文章