uniapp初识笔记3

21、iphone x 底部固定按钮适配

主要就是安全区的兼容。
1、mainfest.json 文件 app-plus 节点下配下 safearea

"safearea": {  
    "bottom": {  
        "offset": "none"  
    }  
}
2、添加安全区元素
.safe-reg {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
如：
<view class="footer-region footer-region-fixed">
                <view class="click-reg">
                    <text>我已阅读并同意该协议</text>
                </view>
                <view class="safe-reg"></view>
            </view> 

https://ask.dcloud.net.cn/article/35564

22、1px 适配问题
ui说 默认的1px 过宽；

.border-b:after {

  position: absolute;

  content: '';

   100%;

  left: 0;

  bottom: 0;

  height: 1px;

  background-color: #e3e5e9;

  -webkit-transform: scale(1, 0.5);

  transform: scale(1, 0.5);

  -webkit-transform-origin: center bottom;

  transform-origin: center bottom;

}

23、picker组件 修改样式
微信小程序暂不支持修改。只能使用 picker-view
https://ext.dcloud.net.cn/plugin?id=273

24、swiper组件滑动圆角；
ios上是直角，需要的是圆角。
解决；
外层套一个view，设置样式
border-radius: 10rpx;
transform: translateY(0);
overflow:hidden;  /* 让照片循环的时候不变成直角 */

25、web-view
web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面。
https://www.cnblogs.com/Glant/p/11217270.html

26、ios bug
场景：
两个tab页面，这里叫首页与个人中心。用到了 store的state属性。通过 state的 hasLogin 来同时控制 俩页的 元素显示。当在首页 改变 hasLogin值时，首页 显示正常；个人中心页 也得到了通知，但出现 本地静态图片 未加载的bug。个人中心页，操作改变时，此bug在首页出现。

解决方式：
通过import 导入这些静态图片，然后 绑定到image标签。

27、image 常用样式
设定宽度，高度自动，不变形
 mode="widthFix" style=" 100%;"