下图可以看出：在做一个展示聊天消息的组件时，由于“组件高度”依赖于聊天内容，所以导致没有显式指定组件高度的情况下出现内容层叠问题。
在Component的ready中计算组件的实际高度然后通过setData()来设置即可。
wxml：
js:
解释：
通过“#msg-content”获取内容视图的node，并通过nodeboundingClientRect()来获取内容视图的尺寸，并加上其他的固定部分的高度最终计算出组件的高度。
单位统一使用rpx。
结果如下所示：
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
` font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback;
<meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, user-scalable=0">
<body onselectstart="return false">
white-space: pre-wrap;
-webkit-tap-highlight-color: transparent;
注意到“pre-wrap”属性值：保留空白符序列，但是正常地进行换行。
white-space:pre-wrap;
filter: brightness(100); 变白
第二行变第一行不变
body{}
小程序上fixed成功过
一般这种都让ios或者安卓端禁止掉，然后在有d性需求的页面添加样式
overflow-y: scroll;
-webkit-overflow-scrolling : touch;
即可
-webkit-overflow-scrolling: touch;
//小程序 h5 交互
touches: 当前屏幕上所有触摸点的列表;
targetTouches: 当前对象上所有触摸点的列表;
changedTouches: 涉及当前(引发)事件的触摸点的列表
通过一个例子来区分一下触摸事件中的这三个属性：
1 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
2 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，
为第二个手指的触摸点，因为第二个手指是引发事件的原因
3 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值
4 手指滑动时，三个值都会发生变化
5 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。
6 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。
3touchmove事件对象的获取
想要在touchmove:function(e,参数一)加一个参数，结果直接使用epreventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一){
var e=arguments[0]
epreventDefault()
}
webpack-config dev-server 添加 disableHostCheck: true,
html的font-size还没设置的时候展示的样式是错误的
一般情况下，一场小程序营销活动，我们会设计相应的专题页，如果是当月的大型促销活动，首页也会同步更新调整架构内容。
如一场品牌专场，我们需要设计的内容
以一场专题活动为例，说明设计的内容和常规尺寸要求如下：
专题页头图（即首页焦点图/轮播图）：尺寸视行业特性而定，如百货类、生鲜类690230，
如服装类530650。
其他小程序推广页分别为：d窗图530650，浮窗海报750259，会场转发图500400
如服装类，我们会在架构表备注的要求
商品详情页：750或800的宽度皆可，适应手机阅读，高度则根据商品本身实际情况而定，建议单张150-200KB之间比较好，方便用户下拉时快速加载内容，提升体验感。
商品活动标：500500，其实只要是1:1的方图即可。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
以上就是我的分享
如果对你有用，就点个赞吧！予人玫瑰，手有余香~
imag标签的属性mode="widthFix"
例如： <image mode="widthFix" src="//images/Product_story_xqpng"></image>
针对引入后高度显示不正确：
1image标签的默认属性——height：“240px”
2image标签不确认高度没有办法写属性：height。
解决方法：
image标签加入 mode="widthFix"这样的效果是自动匹配高度
例如： <image mode="widthFix" src="//images/Product_story_xqpng"></image>
以上就是关于小程序自定义组件如何自适应高度全部的内容，包括:小程序自定义组件如何自适应高度、获取各种高度 等H5页面笔记、小程序商城运营推广所需的设计和详情页是尺寸是多少等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）