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

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

作者: 莫奈的有趣灵魂 | 来源:发表于2021-03-15 11:47 被阅读0次

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

  <block>
    <swiper autoplay="{{ autoplay }}" class="banner-box swiper-box dot-{{ itemStyle.btnShape }}" duration="{{ duration }}" circular="{{ true }}" indicator-dots="{{ indicatorDots }}" interval="{{ params.interval }}" indicator-color="rgba(255, 255, 255, .8)"
      indicator-active-color="{{ itemStyle.btnColor }}" bindchange="_bindChange" data-item-key="{{ itemIndex }}" style="height: {{imgHeightsThis}}px !important">
      <swiper-item wx:for-item="banner" wx:for="{{dataList}}" wx:key="this">
        <image mode="widthFix" catchtap="navigationTo" class="slide-image" bindload="_imagesHeight" src="{{banner.litpic}}" data-id="{{index}}" data-item-key="{{ itemIndex }}" ></image>
      </swiper-item>
    </swiper>
  </block>
  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]
      });
    },
}

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/koqkcltx.html