El deslizamiento horizontal del subprograma se puede realizar utilizando el componente de vista de desplazamiento del subprograma Los pasos específicos son los siguientes:
- Agregue el componente de vista de desplazamiento en el archivo wxml, establezca el atributo horizontal en verdadero y establezca el ancho y la altura al mismo tiempo;
<scroll-view class="scroll-view" scroll-x="true" scroll-y="false" style="width: 100%; height: 200rpx;">
<!-- 内容部分 -->
</scroll-view>
- Establezca el estilo del componente de vista de desplazamiento en el archivo de estilo, como establecer el ancho del elemento interno en un valor fijo y forzar un salto de línea;
.scroll-view {
white-space: nowrap;
display: inline-flex;
}
.scroll-view > .scroll-item {
width: 200rpx;
margin-right: 10rpx;
}
- Establezca dinámicamente los datos de los elementos internos del componente de vista de desplazamiento en el archivo js, por ejemplo, use wx:for para recorrer la matriz y representar los elementos de la matriz como elementos secundarios del componente de vista de desplazamiento.
<scroll-view class="scroll-view" scroll-x="true" scroll-y="false" style="width: 100%; height: 200rpx;">
<block wx:for="{
{list}}" wx:key="{
{index}}">
<view class="scroll-item">{
{item}}</view>
</block>
</scroll-view>
De esta manera, se puede realizar una pequeña página de programa que se puede deslizar horizontalmente.