微信小程序界面开发-自适应轮播图

一、wxml文件`

  <swiper autoplay="true" indicator-dots="true" >
    <swiper-item wx:for="{{movies}}">
      <image style="width:{{imagewidth}}px ;height:{{imageheight}}px"
      src="{{item.url}}" bindload="imageLoad"></image>
    </swiper-item>
  </swiper>

解释:
swiper:滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
详细属性可以进入微信开发文档官网
二、js文件

data:{
    movies: [
      { url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=186844728,1327136957&fm=26&gp=0.jpg' },
      { url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2962521156,2821584462&fm=26&gp=0.jpg' },
      { url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3354585946,2561969542&fm=26&gp=0.jpg' }
    ]
    },
    imageUtil: function (e) {
    var imageSize = {};
    var originalWidth = e.detail.width; //图片原始宽
    var originalHeight = e.detail.height;  //图片原始高
    //图片高宽比
    var originalScale = originalHeight / originalWidth;
    //获取屏幕宽高
    wx.getSystemInfo({
      success: function (res) {
        var windowWidth = res.windowWidth;
        var windowHeight = res.windowHeight;
        //屏幕高宽比
        var windowscale = windowHeight / windowWidth;
        if (originalScale < windowscale) { //图片高宽比小于屏幕高宽比
          //图片放缩后的宽度为屏幕宽
          imageSize.imageWidth = windowWidth;
          imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
        }
        else {
          imageSize.imageHeight = windowHeight;
          imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
        }
      }
    })
    return imageSize;
  },

  imageLoad: function(e){
    var imageSize = this.imageUtil(e);
    this.setData({
      imagewidth: imageSize.imageWidth,
      imageheight: imageSize.imageHeight
    })
  },

解释:movies是一个数组,存放着轮播图的网络地址,下面两个是实现自适应功能的函数。
三、效果
iPhone XR
例子
iPhone5
例子
(参考资料微信开发者文档)

发布了45 篇原创文章 · 获赞 52 · 访问量 2816

猜你喜欢

转载自blog.csdn.net/weixin_43520670/article/details/103252201