Después de escribir la capa de vista, encontré que algunas "líneas verticales" aparecían en la página de manera inexplicable, como se muestra en la siguiente figura:
Este código html está escrito así:
<view class="other-des">
<view class="section">
<text class="section-num">{
{course_info.SectionCount}}</text>
<text class="section-text">节课程</text>
</view>
<view class="section">
<block wx:for="{
{tools.convertToHMS(course_info.Duration)}}" wx:key="index">
<text class="section-num">{
{item}}</text>
<block wx:if="{
{index == 0}}">
<text class="section-text">时</text>
</block>
<block wx:if="{
{index == 1}}">
<text class="section-text">分</text>
</block>
<block wx:if="{
{index == 2}}">
<text class="section-text">秒</text>
</block>
</block>
</view>
<view class="section">
<text class="section-num">{
{course_info.PurchaseMarkup}}</text>
<text class="section-text">人最近购买</text>
</view>
</view>
El estilo css es así:
.other-des {
margin-top: 8px;
padding: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
.section {
flex: 1;
display: flex;
align-items: flex-end;
}
.section-num {
font-size: 32rpx;
color: #000000;
line-height: 32rpx;
}
.section-text {
color: #586470;
font-size: 24rpx;
line-height: 24rpx;
}
La depuración de la máquina real no puede encontrar el elemento "barra vertical", pero muestra que es parte de la sección. Parece que esta línea vertical no debería ser agregada por mí mismo. Si es agregada por mí mismo, el elemento debe encontrarse al depurar en la máquina real.
Cuando hago clic en la interfaz y coloco el mouse en la línea vertical, me doy cuenta de que es una barra de desplazamiento... También puede desplazarse hacia arriba y hacia abajo con el mouse...
¿Por qué hay una barra de progreso adicional aquí? Después de analizarla, la razón es que el texto secundario está más allá del alcance de la vista principal. Úselo para overflow: hiddenestablecer el css de la vista principal.
overflow: hidden; es una propiedad de CSS que controla cómo se muestra el contenido de desbordamiento de un elemento.
Las funciones específicas son las siguientes:
- Cuando se aplica a un contenedor principal, puede ocultar el contenido del elemento secundario más allá de los límites del contenedor.
- Cuando se aplica a un contenedor de texto, el desbordamiento de texto se puede omitir y ocultar.
- También puede evitar que se muestren las barras de desplazamiento para que el contenido no se pueda ver desplazándose.
Usando el desbordamiento: oculto; puede controlar de manera simple y efectiva la visibilidad y el comportamiento de desbordamiento del contenido interno del elemento, brindando más opciones de personalización para el diseño de la página y los efectos visuales.
Agregar configuraciones de atributos a la sección overflow: hiddenresuelve este problema
.section {
flex: 1;
display: flex;
align-items: flex-end;
overflow: hidden;
}
El efecto es el siguiente:
