【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 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...