微信小程序轮播图设计

效果（红色框）：

紧接上话app.json的配置成功后，创建一个index文件夹在index.wxml中写下代码：

说明：

text 类似html span标签 行内元素，不换行。

view 类似HTML div标签 块级元素，换行。

swiper标签(滑块视图容器。)可在微信文档查看使用说明。

bindload属性 组件加载成功时触发。

接着在index.js(交互文件）配置代码如下：

data: {
    // A:"400px",
    imgH:"",
swiperImgUrl:[
  "http://www.kaotop.com/file/tupian/20220517/part-00283-2437.jpg",
  "http://www.kaotop.com/file/tupian/20220517/part-00489-2399.jpg",
  "https://img2.baidu.com/it/u=3555113481,519077845&fm=253&fmt=auto&app=138&f=JPG?w=750&h=500"
]},
  //设置一轮播图片，高度自适应的方法
  handleImgH(e){
    console.log("事件对象：",e);
    
    //1、先获取屏幕的宽度
    var winWidth = wx.getSystemInfoSync().screenWidth;
    console.log("先获取屏幕的宽度=",winWidth);
   //2、获取图片的原始宽度
   var imageWidth = e.detail.width;
   console.log("然后获取图片的原始宽度=",imageWidth);
   //3、获取图片的原始高度
   var imageHeight = e.detail.height;
   console.log("然后获取图片的原始高度=",imageHeight);
   //4、获取1、2、3的值
   //5、当轮播图片的宽（高）度==屏幕宽（高）度
   var swiperH = (imageHeight/imageWidth)*winWidth+"px";
   console.log("所求的不同机型的轮播图片高度为：",swiperH);
   this.setData({
     imgH:swiperH
   })
  },

最后在index.wxss设计图片样式

.swiper_ways_one image{
  width:100%;
  /* height:100%; */
}

最终点个赞吧！