Deslice la lista horizontalmente, puede usar etiquetas:
1: vista de desplazamiento
2: deslizar
3: desbordamiento-x
En términos generales, si se desliza horizontalmente, necesita una configuración especial.Si solo usa la vista para configurar la visualización: flex, no puede deslizar horizontalmente, y el de la derecha estará oculto. Si establece la dirección horizontal, las siguientes tres formas.
Uno: vista de desplazamiento
Además del deslizamiento horizontal, vertical y horizontal de la vista de desplazamiento mencionada en el sitio web oficial, si encuentra algunos problemas aquí, escríbalos.
Situación aplicable:
Horizontal: la altura del contenido es constante (si no, la vista de desplazamiento se alineará automáticamente con la parte inferior para formar un pico de montaña, vea la imagen a continuación)
Probé algunas configuraciones, pero no puedo hacer que esté alineado en la parte superior y tenga la misma altura a través de configuraciones directas. Entonces, si tiene que usar esto, puede usar el método auxiliar: configure el contenido en la lista usted mismo para que la cantidad de elementos de contenido sea la misma, y puede configurar el color y el fondo del contenido que configuró para lograr visual alineación.
Si desea utilizar la vista de desplazamiento también es muy simple, son necesarios tres elementos
1: desplazamiento-x o desplazamiento-y
2: espacio en blanco: nowrap;
3: Establecer visualización: bloque en línea; en la subetiqueta.
Si solo desea usar la vista de desplazamiento, también puede tomar una táctica indirecta: en lugar de usar la lista directamente dentro de la vista de desplazamiento, envuelva una capa de vista, use la lista dentro de esta vista, de modo que solo haya un elemento en desplazamiento- vista, esto solo expandirá la vista, por lo que puede lograr el efecto que no se puede lograr ahora, y se puede alinear en la parte superior.
Ejemplo: deslizar
o usar swiper
<swiper :indicator-dots="false" :circular="true" :autoplay="true" display-multiple-items="2" class="banner">
<swiper-item class="swiper-item" v-for="(item,index) in list2":key="index">
<p>{
{item}}</p>
</swiper-item>
</swiper>Si desea configurar este control para que no sea una página completa, debe configurarse por separado durante mucho tiempo.
El ancho del deslizador no se puede configurar, si no se configura, se ajustará automáticamente a toda la página en la última posición.
El swiper-item no puede establecer la distancia de izquierda a derecha. Se ha establecido antes, pero habrá muchos errores pequeños. Así que no uses esto. Pero esto puede establecer el ancho Según el sitio web oficial, incluso si el ancho no está configurado, el contenido no se puede expandir automáticamente.
Si usa esto, habrá un problema, es decir, el extremo derecho no puede ser tan correcto como la vista de desplazamiento (si el elemento interno no es una página completa). Como resultado, el lado derecho siempre estará vacío. Y si el ancho del deslizador se establece en este momento, no será muy adecuado, porque si la configuración es pequeña, el ancho es pequeño, por lo que habrá bordes.
Estrategia de desvío : igual que la vista de desplazamiento anterior, solo se usa un elemento de deslizador y la lista de contenido está dentro del elemento de deslizador. Solo uno debería estar bien. Después de configurarlo, descubrí que debido a las características del deslizador, solo puedo deslizar una página cuando deslizo, y no puedo quedarme en el medio de esta página, así que no puedo deslízalo todo el tiempo. Esto no es aplicable.
Tres: desbordamiento-x
Configure el desplazamiento horizontal, simplemente configúrelo para la vista normal
overflow-x: auto;
display: -webkit-box;
overflow-y: hidden;ocultar la barra de desplazamiento horizontal
::-webkit-scrollbar {
display: none;
}<view class="viewsc">
<view class="viewscli" v-for="(item, index) in list" :key="index">
<!-- {
{item}} -->
<view class="swiper-item22" v-for="(itemli, indexli) in item" :key="indexli">
{
{itemli}}
</view>
</view>
</view>
.viewsc {
margin-top: 100px;
background-color: antiquewhite;
color: black;
display: flex;
overflow-x: scroll;
/* overflow-y: hidden; */
display: -webkit-box;
height: 200px;
.viewscli {
margin-right: 10px;
/* display: flex; */
/* flex-direction: row; */
}
}
::-webkit-scrollbar {
display: none;
}