1. Implementación del desplazamiento horizontal del componente de vista de vista de desplazamiento
Después de agregar scroll-x y enable-flex de acuerdo con los documentos oficiales de WeChat, aún no se puede lograr el desplazamiento horizontal:
1. Agregue scroll-x al componente scroll-view para permitir el desplazamiento y el estilo: display: inline-block;
2. Agregar a el elemento de vista que necesita desplazarse Estilo: espacio en blanco: nowrap;
código wxml:
<scroll-view class="content1" scroll-x>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
código wxss:
view{
width: 200rpx;
height: 200rpx;
text-align: center;
line-height: 200rpx;
/* 解决横向滚动问题 */
display: inline-block; /* 第一步 */
}
view:first-child{
background-color: lightgreen;
}
view:nth-child(2){
background-color: lightskyblue;
}
view:last-child{
background-color: lightpink;
}
.content1{
height: 200rpx;
width: 240rpx;
border: 1px solid red;
white-space: nowrap; /* 第二步 */
}
Representaciones:
