微信小程序实现swiper，banner 不显示问题

第一次写小程序，在实现siwper 容器的时候遇到了 banner 不显示问题  代码如下：

<view class="container">
  <view class="page-body">
    <!-- banner block  -->
    <view class="banner">
      <swiper indicator-dots="{{indictorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}" wx:key="*this">
          <swiper-item>
            <image class="swiper-item" src="{{item}}" mode="aspectFill"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
</view>

这个问题很操蛋，花费了几个小时，在不断的各种测试中终于发现问题所在：

 

原因（重点）：app.wxss 文件中全局已经设置了container 的样式

           而自己又在 <swiper> </swiper> 外部嵌套了<view class="container"> </view>

 

解决方案：1、删除swiper 外嵌套的  <view class="container"> </view>

                  2、修改掉    swiper 外嵌套的  <view class="container"> </view>  的class 名，

                        如：<view class="banner-container"> </view>

                  3、直接删除掉 app.wxss 中设置的.container{}   不建议使用