持续更新记录开发中遇到的问题 ^^

1.变量储存本地图片路径，前面加 require('图片路径')；

2.样式穿透不生效，在script里引入options: { styleIsolation: 'shared' }，如果还是不生效或者样式乱套，可以把样式放到引用它的父组件；

3.uniapp开发小程序插槽传值，父组件接收;

官方文档是这样写的
v-slot:插槽名="数据"
但不会生效加个花括号就好了
v-slot:插槽名="{数据}"

4.微信小程序弹窗滑动会穿透，导致底层也会跟着滑动，弹窗中的滑动部分使用用scroll-view标签,或者在标签上加 :catchtouchmove="true"(组织滚动穿透)

5. 在为scroll-view 设置圆角时，往往他的子view设置被背景色，在子view抵达scroll-view的圆角位置时，子view的内容会超出父view的圆角，导致圆角失效的问题。

给scroll-view设置样式时，添加以下设置即可避免这个问题。

overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

6. 根据数组是否为空动态绑定类名和样式时，判断条件不能跟据arr.length判断，页面不会刷新，可以arr[0];

7.小程序头部和尾部固定高度，中间内容需要撑满剩余空间

父级
.box {
	display: flex;
	flex-direction: column;
	height: 700rpx;
}
头部
.header{
    height:200rpx;
}
中间内容
.main{
    flex-grow: 1;
    overflow: auto;
}
尾部
.footer{
    height:200rpx;
}

8.scroll-view组件内容没有超出高度，就出现滚动条的问题

如果scroll-view组件中第一个元素设置margin-top样式，就会出现滚动条，在scroll-view组件第一个元素设置为<view style="content: ''; overflow: hidden;"></view>下一个元素再设置margin-top就不会出现滚动条，如果是 margin-bottom就在scroll-view组件最后一个元素添加空标签；                                                          

9. IOS端home键小程序底部适配的方法 

在底部元素添加以下样式
padding-bottom: constant(safe-area-inset-bottom); 
padding-bottom: env(safe-area-inset-bottom);  

10.uniapp获取元素高度不准确，在$nextTick方法下面获取就好了（还不行的话外面加个定时器）；

11.小程序预览图片

wx.previewImage({
		urls: ["图片路径"], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
})

12.position:fixed在ios中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。

解决思路：

1.换成相对定位和绝对定位；

2.用js计算；