自定義swiper面板指示點的樣式，image圖片自適應(yīng)寬度比例顯示
微信小程序的swiper組件是滑塊視圖容器，也就是說平常我們看到的輪播圖就可以用它來做，不過這個組件有很多樣式是固定的，但是，有時候我們的設(shè)計稿的面板指示點是需要個性化的，那么如何去修改swiper組件的面板指示點的樣式呢？最近在使用swiper的時候也在想這個，最后發(fā)現(xiàn)在調(diào)試的時候，可以看到他的選擇器。如圖：
-
<swiper class="swiper-box" indicator-dots="{{ indicatordots }}" autoplay="{{ autoplay }}"> -
<block wx:for="{{ swiperItem }}"> -
<swiper-item> -
<navigator url="{{ item.linkUrl }}"> -
<image class="slide-image" src="{{ item.imgUrl }}"></image> -
</navigator> -
</swiper-item> -
</block> -
</swiper>
-
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{ -
margin-bottom: 2rpx; -
} -
.swiper-box .wx-swiper-dot{ -
width:40rpx; -
display: inline-flex; -
height: 10rpx; -
margin-left: 20rpx; -
justify-content:space-between; -
} -
.swiper-box .wx-swiper-dot::before{ -
content: ''; -
flex-grow: 1; -
background: rgba(255,255,255,0.8); -
border-radius: 8rpx -
} -
.swiper-box .wx-swiper-dot-active::before{ -
background:rgba(244,0,0,0.8); -
}
雖然可以通過上面的代碼修改swiper面板指示點的樣式，但是還是有局限性的，不過總算可以修改了，在此簡單記錄一下。?！?/p>
二：微信小程序image圖片自適應(yīng)寬度比例顯示的方法
我們都知道微信小程序的組件image是用來顯示圖片的，它有一下幾個屬性： 1、src 圖片資源地址 2、mode 圖片裁剪、縮放的模式 3、binderror 當(dāng)錯誤發(fā)生時，發(fā)布到 AppService 的事件名，事件對象event.detail = {errMsg: ‘something wrong’} 4、bindload 當(dāng)圖片載入完畢時，發(fā)布到 AppService 的事件名，事件對象event.detail = {height:’圖片高度px’, width:’圖片寬度px’} 但是image有默認(rèn)的固定的寬度和高度，這樣我們在做圖片自適應(yīng)的時候，就不好做了，特別是我們在做一些商品詳情頁的時候，需要image自適應(yīng)屏幕,按原圖比例顯示。那么如何讓image自適應(yīng)比例顯示呢？可以有兩種方法：
一、使用mode：widthFix widthFix：寬度不變，高度自動變化，保持原圖寬高比不變。 首先我們先設(shè)置image的mode為widthFix，然后給圖片加一個固定rpx的寬度，比如：730rpx。 這樣圖片也可以自適應(yīng)了。。因為小程序的rpx本身就是一個自適應(yīng)顯示的單位 二、使用bindload綁定函數(shù)動態(tài)自適應(yīng)。 我們可以給image綁定一個函數(shù)，這個函數(shù)，如上面的bindload說明一樣，我們可以獲取到原圖的寬度和高度。 然后計算他們的寬高比率。。然后設(shè)置一個寬度大?。╮px），最后通過style動態(tài)設(shè)置image的寬高。代碼如下：
html代碼：
-
<image src="{{ item }}" bindload="imageLoad" data-index="{{ index }}" -
style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>
js代碼：
-
Page({ -
data: { -
images:{} -
}, -
imageLoad: function(e) { -
var $width=e.detail.width, //獲取圖片真實寬度 -
$height=e.detail.height, -
ratio=$width/$height; //圖片的真實寬高比例 -
var viewWidth=718, //設(shè)置圖片顯示寬度，左右留有16rpx邊距 -
viewHeight=718/ratio; //計算的高度值 -
var image=this.data.images; -
//將圖片的datadata-index作為image對象的key,然后存儲圖片的寬高值 -
image[e.target.dataset.index]={ -
width:viewWidth, -
height:viewHeight -
} -
this.setData({ -
images:image -
}) -
} -
})
最后，我們就可以可以通過images[index].width 和 images[index].height給每一個圖片設(shè)置寬高了。 以上是自己在玩小程序時，關(guān)于image自適應(yīng)方法的簡單記錄。。
效果如下圖所示：
