uniapp 开发小程序 ios适配 页面回弹效果
需求:所有页面的背景色都是统一的颜色,安卓的话是没什么问题的,但是ios上有一个页面上拉下拉的回弹效果 ,有就有吧,主要是这个回弹的背景色还不一样 ,一个灰色的主背景 下拉是一个白色的背景肯定是不行滴。正常情况下的话如果的页面内容不多不会造成页面滑动的话可以直接在pages.json里面加。这个是比较简单的会加上背景色但是加的也不多一直下拉的话还是能看到其他的背景色。-- 主要是用 scroll-
最近一个项目 css要求非常严格 记录一下遇到的一个知识点吧
需求:所有页面的背景色都是统一的颜色,安卓的话是没什么问题的,但是ios上有一个页面上拉下拉的回弹效果 ,有就有吧,主要是这个回弹的背景色还不一样 ,一个灰色的主背景 下拉是一个白色的背景肯定是不行滴
解决办法2种
1.在page.json 里面找到对应的页面 直接在style里面加上一个
"backgroundColorTop": "顶部窗口的背景色",
"backgroundColorBottom": "底部窗口的背景色"
这个是比较简单的 会加上背景色但是加的也不多 一直下拉的话还是能看到其他的背景色
(不过一般也没有人会一直下拉吧)
2.如果追求极致的完美 可以试试这个方法
正常情况下的话 如果的页面内容不多不会造成页面滑动的话 可以直接在pages.json里面加
"disableScroll": true
这行代码会直接把页面的滚动取消 一般的话不建议直接用这个方法
不过我们可以给页面上加一个scroll-view 标签
<scroll-view scroll-y="true" class="content" :enhanced="true"
:bounces="false" :show-scrollbar="false">
<!-- 主要是用 scroll-view 标签包裹住内容 -->
</scroll-view>
.content{
//可视高度,需要在多大的盒子中进行滑动
height: 100vh;
width: 750rpx;
}
注:如果页面有弹窗,最好写在scroll-view外边
用它直接包裹全部内容
这样下来可以完美禁止ios自带的橡皮筋回弹。内容少时,"disableScroll": true生效,内容多时,有第二步。
每日一个小总结,今天就这样了
更多推荐
所有评论(0)