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

雨点打透心脏的1/2处 2023-06-16 10:50 7阅读 0赞

**一、wxml文件**\`

解释：  
swiper：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。  
详细属性可以进入[微信开发文档官网][Link 1]  
**二、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  
![例子][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]  
iPhone5  
![例子][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 1]  
（参考资料微信开发者文档）

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191128122316902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191128122436140.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70