微信小程序开发日记之----swiper组件的坑

 官方文档上写swiper组件只能用在最外层，但有时为了界面实现必须把它嵌套在其他元素里，我遇到的是view。

 我要作的是在指定的view里头部加一个图片轮播效果。这时问题来了，在开发环境的模拟器里显示正常，但到了真机上图片的两边总是与外边框存在一定的间距，各种设置<image>的mode都不行。最终于在调试时发现了问题，原来它的<image>在自动设置比例的时候有一个属性overflow一直被设置成hidden。就是说图片元素在超出了它的布局后都被隐藏了。有了这个我们就不必去费劲调整它的布局了，微信的mina隐藏了很多样式，所以调整布局可是个苦活。

 解决办法将所有<swiper-item>中<image>的属性overflow设置为show。问题搞定。最终效果如图：

<view class="body">
  <view class="swiper-tab">
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">应用</view>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">附近</view>
  </view>
  <view class="{{currentTab==0 ? 'show' : 'hidden'}}">

    <swiper autoplay='true' interval='5000' duration='300' circular='true' class='swiper-box'>
      <block wx:for="{{imgUrls}}" wx:key="imgUrls">
        <swiper-item>
          <image src="{{item}}" mode='widthFix' style='width:100%; overflow:show;' />
        </swiper-item>
      </block>
    </swiper>

    <view class='userContent'>
      <view class='news-left'>
        <image src='../../images/call.png' style='width:48px; height:48px; margin:20px;  background-color: rgba(151, 151, 166, 0.9); padding:10px;  border-radius: 10px;'></image>
      </view>
      <view class='news-right'>
        <view class='news-title'>直呼</view>
        <view class='news-lable'>输入对方号码发起呼叫。</view>
        <view class='news-context'>
          <input id='toNumber' placeholder='对方号码' type='number' bindinput="toNumberEvent"></input>
          <button bindtap='wxCall'>呼叫</button>
        </view>
      </view>
    </view>

    <view class='userContent'>
      <view class='news-left'>
        <image src='../../images/unitcall.png' style='width:48px; height:48px;margin:20px;  background-color: rgba(151, 151, 166, 0.9); padding:10px;  border-radius: 10px;'></image>
      </view>
      <view class='news-right'>
        <view class='news-title'>呼叫中心转接</view>
        <view class='news-lable'>输入本机号码发起呼叫。</view>
        <view class='news-context'>
          <input id='fromNumber' placeholder='本机号码' type='number' bindinput="fromNumberEvent"></input>
          <button bindtap='proxyCall'>呼叫</button>
        </view>
      </view>
    </view>
  </view>
  <view class="{{currentTab==1 ? 'show' : 'hidden'}}">
    <map longitude='{{longitude}}' latitude='{{latitude}}' style='width:100%; height:{{winHeight*0.4}}px;'></map>
    <scroll-view scroll-y='true' style="height: {{winHeight*0.6}}px;" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
      <view id="green" class="scroll-view-item bc_green"></view>
      <view id="red" class="scroll-view-item bc_red"></view>
      <view id="yellow" class="scroll-view-item bc_yellow"></view>
      <view id="blue" class="scroll-view-item bc_blue"></view>
    </scroll-view>
  </view>
</view>