Home > Article > Web Front-end > The solution to the problem that using Swiper in AngularJS to create a scroll chart that cannot slide
The solution to the problem that using Swiper in AngularJS to create a scroll chart that cannot slide
- 高洛峰Original
- 2016-12-06 16:13:191019browse
Swiper is currently a popular mobile touch sliding plug-in. Because it is simple, easy to use and easy to use, it is welcomed by many front-end developers.
I encountered this problem today when using Swiper:
Use angularjs dynamic loop to generate the swiper-slide class, and generate more than 6 sliding pages in swiper-wrapper, but the second page cannot be drawn, try to change longSwipesRatio Modify the value to the minimum, but it still doesn't work.
During the test, it was found that if n loop parts are manually copied, n blocks can be slid; after the window size is manually adjusted so that the page document changes (dynamic response), it can slide normally.
So I guessed that the mechanism of swiper is: during initialization, it automatically scans how many swiper-slide class blocks there are under the swiper-wrapper class, and then how many blocks are allowed to slide. In Angular, it is always defined after swiper is initialized, and swiper cannot correctly scan how many slides there are (actually finding a template to be looped), so it cannot move.
After finding the cause, you just need to prescribe the right medicine. When checking Swiper's API, I found that there are two parameters: observer and observeParents. The former starts the dynamic checker and automatically initializes swiper when changing the style of swiper (such as hiding/showing) or modifying the sub-elements of swiper. The principle of the latter is the same as the former, except that observation is applied to the parent element of Swiper. The default value for both is false. So just add these two lines to the original swiper initialization code.
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
paginationClickable: true,
longSwipesRatio: 0.3,
touchRatio:1,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})