轮播图高度与图片动态适配

1. swiper需要指定固定高度
2. 默认情况下小程序轮播图高度为150PX,如果项目中图片大于固定高度就会被隐藏
3. 使用image标签 mode=”widthFix” 宽度不变，高度会自动变化
4. 解决方案是使用wx.createSelectorQuery创建查询节点信息的对象
5. 在通过这个实例对象的选择器获取对应的子组件(图片)的高度信息并赋值给swiper

//封装后的代码
export function queryComponent(selector) {  
  return new Promise(resolve=>{  
    //创建一个选择查询对象
    const query = wx.createSelectorQuery()  
    //选择匹配选择器,获取节点布局位置信息
    query.select(selector).boundingClientRect()  
    //执行所有的请求。请求结果按请求次序构成数组
    query.exec((res)=>{  
      resolve(res)  
    })  
  })  
}

页面设置Padding时候如何让子元素铺满屏幕宽度

1. 目的:当页面大体布局一致的时候可以给页面设置一个padding来进行布局但是有些模块需要超出Padding限制的区域
2. 核心方法：获取屏幕宽度赋值给需要超出Padding的模块(组件)然后通过margin进行偏移Padding限制高度来达到铺满屏幕的效果

//page页面的css
page {  
    padding: 24rpx 24rpx;  
}
//需要超出的子元素css
.item{
    margin-left: -24rpx;
}

//JS方法
wx.getSystemInfo({  
  success:(res)=>{  
    this.globalData.SystemInfo.screenWidth=res.screenWidth  
    this.globalData.SystemInfo.screenHeight=res.screenHeight  
  }  
})
//然后把这个获取到的屏幕宽度赋值给需要超出的组件
<scroll-view  scroll-x style="width:{{screenWidth}}px"></scroll-view>