微信小程序scroll-view高设置100%在苹果6p下的兼容性问题

home.wxml

<view class='main'><view class='crumbs'></view><view class='title'></view><view class='scrollView'><scroll-view style='height:100%'>我是scroll-view</scroll-view></view>
</view>

home.wxss

page{width:100%;height:100%;background-color: #0aae1d;
}
.main{width:100%;height:100%;display:flex;flex-direction:column;
}
.crumbs,.title{width:100%;height:80rpx;line-height:80rpx;background-color: rgba(255,255,255,.3);
}
.title{background-color: rgba(0,0,0,.3);
}
.scrollView{width:100%;height:1rpx;flex-grow:1; // 这样写在苹果6P下scroll-view组件是高不会继承父元素的高，其他都正常background-color: rgba(104,104,104,.3);
}
scroll-view {width:100%;height:100%;background-color: red;
}

正确做法

.scrollView{width:100%;height: %;  // 按照开发者工具调试百分比flex-grow:1;background-color: rgba(104,104,104,.3);
}

欢迎访问

微信小程序scroll-view高设置100%在苹果6p下的兼容性问题相关推荐

微信小程序-图片宽高设置
微信小程序中,有很做组件都是有默认宽高的,比如,image组件默认宽度320px.⾼度240px,这些默认设置常常会对我们的页面布局造成影响 <!-- mode="widthFix&q ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
微信小程token_微信小程序url与token设置详解
微信小程序url与token设置详解新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 isValid(); class wechatAPI { public function ...
微信小程序 Picker-view背景透明设置
微信小程序 Picker-view背景透明设置在使用picker-view时,需要设置picker-view背景透明时,在wxml中设置 <picker-view mask-style=&qu ...
和平精英吃鸡助手微信小程序源码一键设置灵敏度键位捏脸
这是一款吃鸡小助手类型的微信小程序源码该小程序由键位,灵敏度,捏脸一键设置组合小程序内的键位设置,灵敏度设置代码是由各大主播和职业选手那些分享的然后改小程序通过全网采集而来另外里面还有捏脸数据 ...
微信小程序ios滑动问题（滑动卡顿，下拉拖动自定义导航栏）
微信小程序ios滑动问题(滑动卡顿,下拉拖动自定义导航栏) 1.ios中个别机型类似6s ,对微信自带的scroll-view无法滑动: 解决:在滑动内容区添加css属性,overflow: auto ...
微信小程序中view水平垂直居中
微信小程序布局中view有时候需要在水平方向和垂直方向上都居中,发现flex布局可以实现,例如view1(图中灰色方块)需要实现居中,可以用如下设置实现: wxss文件中的设置如下: .main {w ...
微信小程序解决view点击事件穿透地图map触发markertap
微信小程序中使用map组件,ios手机中点击地图上的view,会触发底下的markertap,只要底下如果有marker点的话. 这就造成了用户体验不是很好. 然后无意间我发现点击能滑动的scroll ...
微信小程序按钮控件设置呈现效果
1.效果图在小程序中完成上述布局,需要设置四个按钮位置,控制每个按钮大小.设置按钮背景颜色,设置标题和图标的位置. 2.代码说明 2.1 index.wxml <view class=&quo ...

微信小程序scroll-view高设置100%在苹果6p下的兼容性问题

微信小程序scroll-view高设置100%在苹果6p下的兼容性问题

微信小程序scroll-view高设置100%在苹果6p下的兼容性问题相关推荐

最新文章

热门文章