官方文档上写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>