微信小程式--swiper圖片顯示不完整
我把微信小程式中swiper的官方程式碼拷貝下來發現圖片顯示不完全,像這樣不能完全填滿整個寬度,後來看官方image標籤的解釋和描述,各種mode換了個遍,css也修改了很多次,還是不會(水平不到家······)
後來就想到把圖片作為背景,把官方的程式碼修改一下,好像就行了,
官方wxml程式碼
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for=" {{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
修改後的程式碼
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration }}">
<block wx:for="{{imgUrls}}">
<!--差別就再這裡了-->
<swiper-item style="background:url({{item}});background-repeat: no-repeat;background-size:100% 200px; ">
</swiper-item>
</block>
</swiper>
反正經過這次,以後發現圖片顯示不全的問題,就試試把圖片當作背景吧