html轮播图小屏不居中显示,[解决]小程序轮播图不同手机屏幕适配展示

1.image绑定bindLoad方法

2.swiper绑定_bindChange方法

indicator-active-color="{{ itemStyle.btnColor }}" bindchange="_bindChange" data-item-key="{{ itemIndex }}" style="height: {{imgHeightsThis}}px !important">

data: {

imgHeights: [], // 图片的高度

imgCurrent: 0, // 当前banne所在滑块指针

imgHeightsThis:0

},

methods: {

/**

* 计算图片高度

*/

_imagesHeight: function(e) {

let winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度

let imgh = e.detail.height;//图片高度

let imgw = e.detail.width;//图片宽度

let swiperH = (winWid * imgh)/imgw;//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 -> swiper高度 = (屏幕宽度 * 图片高度) / 图片宽度

let imgHeights = this.data.imgHeights;

// 把每一张图片的高度记录到数组里

imgHeights.push(swiperH);

this.setData({

imgHeights,

imgHeightsThis:imgHeights[0]

});

},

/**

* 记录当前指针

*/

_bindChange: function(e) {

this.setData({

imgCurrent: e.detail.current,

imgHeightsThis:this.data.imgHeights[e.detail.current]

});

},

}