微信小程序轮播图通过正方形等比例展示

本来还想着鉴于各种手机屏幕尺寸大小不一样,个人感觉无法做到正方形的方式展示...

但忽然间发现同行的项目上面实现了这个情况!!!

自己尝试了一下:

        // wxml
        <swiper style="height:{{sysWidth}}px">
          <swiper-item wx:for="{{5}}" wx:key="index">
            <image src="{{item.url}}" mode="widthFix"/>
          </swiper-item>
        </swiper>

        // wxss
        image{
            width: 100%;
        }


        // js
        sysWidth: wx.getSystemInfoSync().windowWidth, //图片宽度

其实就是通过动态获取设备的宽度, 然后把这个宽度作为高度赋值给swiper, 再把 image 的 mode 裁剪模式设置为 "widthFix" 即可.

当然, image 的宽度得加上 width:100%