Framework7 V1中的滑动滑块在第一个和最后一个图像之前和之前创建空白页面

时间:2018-07-24 14:10:19

标签: cordova html-framework-7

当我在我的带有静态图像的cordova应用中使用框架7中的滑动滑块时。滑块可以正常工作,但是当我从Web服务动态获取图像时,它会在第一个图像之前和最后一个图像之后创建空白页面,滑块不会停止,这是我的示例代码

当图片为静态时:----

<div data-space-between="50" class="swiper-container swiper-init" >
     <div class="swiper-pagination"></div>
    <div class="swiper-wrapper" id="plot_img">

      <div class="swiper-slide" ><img src="images/slider1.jpg" alt="">
        <div class="slide_text">
          <h4>some head1</h4>
          <p>sometext1</p>
        </div>
      </div>
      <div class="swiper-slide"><img src="images/slider1.jpg" alt="">
          <div class="slide_text">
            <h4>some head2</h4>
            <p>some text2</p>
          </div>
      </div>
  </div>
</div>

当我动态获取图像时,这里是html,我试图在id =“ plot_img”中绘制图像

<div data-space-between="50" class="swiper-container swiper-init" >
     <div class="swiper-pagination"></div>
    <div class="swiper-wrapper" id="plot_img">
     </div>
</div>

这是ajax代码

json.response.forEach(function(obj,val){
      imghtml += '<div class="swiper-slide"><img 
    src="'+json.url_to_append+''+obj.fields.featured_image+'" alt="">
    <div 
    class="slide_text"><h4>'+obj.fields.banner_name+'</h4>
    <p>'+obj.fields.banner_description+'</p></div></div>';
});

$$('#plot_img').html(imghtml)

0 个答案:

没有答案