收藏
回答

view显示一个色块,高度根据同一行的其他元素高度自动获取,怎么设置style?

要不设置高度,或高度设置100%,在调试环境下看,实际高度为0,不显示

<view class='messenger-row'style="justify-content: flex-start;">
	<view class="v-bar"></view>
	<view class="messenger-item-view">
		<view class='item-name'>信息员编号:</view>
		<view class='item-value'>{{item.user_code}}</view>
	</view>
</view>

.v-bar{
	width: 10px;
	display: flex;
	box-sizing: border-box;
	background-color: blue;
	flex-shrink: 0;
}

上面messenger-row的高度也没有设置,是通过内容自动撑开的
最后一次编辑于  2021-01-19
回答关注问题邀请回答
收藏

3 个回答

  • 李忠
    李忠
    2021-01-19
    messenger-row中加align-items: stretch;就能实现我要求的功能,但就是太诡异了,我在另一个测试工程也这么写的就没有问题:
    <view class="border-left-view">
    	<view class="border-left" style="margin-top: 80rpx;margin-bottom: 40rpx;"></view>
    	<view class="right-box">
    		<view class="m-top">信息1</view>
    		<view class="m-top">信息2</view>
    	</view>
    </view>
    
    	.border-left-view {
    		display: flex;
    		flex-direction: row;
    		box-sizing: border-box;
    
    
    	}
    
    
    	.right-box {
    		// height: 300rpx;
    		display: flex;
    		flex-direction: column;
    		box-sizing: border-box;
    		padding: 20rpx 40rpx;
    	}
    
    
    	$arrow-line-color:#818181; /*线颜色*/
    	$arraw-width:9px;			/*剪头宽度,奇数*/
    	$arrow-line-width:1px;		/*线宽度*/
    	.border-left {
    		width: $arrow-line-width;
    
    
    		display: flex;
    		box-sizing: border-box;
    		background-color: $arrow-line-color;
    		position: relative;
    		flex-shrink: 0;
    	}
    
    
    	.border-left:before {
    		content: "";
    		position: absolute;
    		width: $arraw-width;
    		height: $arraw-width;
    		border-radius: 50%;
    		background-color: $arrow-line-color;
    		left: -($arraw-width - $arrow-line-width) /2;
    		top: 0px;
    	}
    
    
    	.border-left:after {
    		content: "";
    		position: absolute;
    		width: 0;
    		height: 0;
    		border: $arraw-width /2  solid transparent;
    		border-top-color: $arrow-line-color;
    		left: -($arraw-width - $arrow-line-width) / 2;
    		bottom: -$arraw-width;
    	}
     上面的right-box设置成row或column都没有问题,border-left会显示一个带起始点的向下的箭头线段,高度随右边的view的高度自动调整的
    


    2021-01-19
    有用
    回复
  • 迪克
    迪克
    2021-01-19
    <view class="v-bar"></view>
    .v-bar
    

    使用了 flxe 布局 , flxe 布局必须设置高度 或者里面有元素能撑起高度。

    2021-01-19
    有用
    回复 1
    • 李忠
      李忠
      2021-01-19
      不是你说的那样,我另外一个测试项目,正常的
      2021-01-19
      回复
  • 睡前原谅一切
    睡前原谅一切
    2021-01-19

    外层得有高度。

    2021-01-19
    有用
    回复 4
    • 李忠
      李忠
      2021-01-19
      我想自适应,可以吗?我在另外一个项目中,就这么设置的,那个没有问题,在这个项目中就是不行
      2021-01-19
      回复
    • 睡前原谅一切
      睡前原谅一切
      2021-01-19回复李忠
      提供下代码片段:
      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
      2021-01-19
      回复
    • 李忠
      李忠
      2021-01-23回复睡前原谅一切
      已经试出是什么原因了,不管是小程序还是网页,都有这样的问题:在父级view中有align-items属性时,就会导致没有内容的view,只设置宽度,没有设置高度的view消失不见!坑人哦
      2021-01-23
      回复
    • 睡前原谅一切
      睡前原谅一切
      2021-01-25回复李忠
      2021-01-25
      回复
登录 后发表内容
问题标签