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"
]
}
})
- 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)
- 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.