la vista de desplazamiento no puede desplazar el problema

Preparar

<!--index.wxml-->
<view class="container">
<scroll-view class="scroll-container">
  <view class="scroll-item" wx:key="index"  wx:for="{
     
     {listData}}">
    {
   
   {item}}
  </view>
</scroll-view>
</view>

js

// index.js
Page({
    
    
  data:{
    
    
    listData:[
      "小明01",
      "小明02",
      "小明03",
      "小明04",
      "小明05",
      "小明06",
      "小明07",
      "小明08",
      "小明09",
      "小明10"
    ]
  }
})

inserte la descripción de la imagen aquí

  1. Determine la dirección de deslizamiento que desea lograr y verifique si está escrito scroll-x o scroll-y (scroll-x: true admite deslizamiento horizontal scroll-y: true admite deslizamiento vertical)
  2. Compruebe si no ha establecido una altura fija para la vista de desplazamiento. No configuré una altura fija antes, por lo que no pude deslizarla. Porque se muestra el diseño, pero la altura del contenedor principal no es suficiente. y no se muestra)

modificar estilo

/**index.wxss**/
.scroll-container{
    
    
  width: 700rpx;
  height: 40rpx;
  line-height: 40rpx;
  white-space: nowrap;
}

.scroll-container .scroll-item{
    
    
  display: inline-block;
}

Permitir que la vista de desplazamiento sea horizontal

<!--index.wxml-->
<view class="container">
<scroll-view scroll-x="true" class="scroll-container">
  <view class="scroll-item" wx:key="index"  wx:for="{
     
     {listData}}">
    {
   
   {item}}
  </view>
</scroll-view>
</view>

Puedes lograr el efecto de desplazamiento.
inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/qq_36437991/article/details/129990334
Recomendado
Clasificación