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

1.image绑定bindLoad方法
2.swiper绑定_bindChange方法

  
    
  
  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]
      });
    },
}

你可能感兴趣的:([解决]小程序轮播图不同手机屏幕适配展示)