微信小程序上图下字导航横向滚动代码

<scroll-view scroll-x="true" class="nav">
<view class="nav-item">{{item}}</view>
</scroll-view>

.nav {
white-space: nowrap;
overflow-x: scroll;
display: flex;
}
.nav-item {
padding: 10px;
margin-right: 10px;
background-color: #ccc;
}
.nav-item:last-child {
margin-right: 0;
}

相关问题

微信小程序图片横向滚动

可以使用scroll-view组件来实现微信小程序图片横向滚动。

1. 在wxml文件中添加scroll-view组件：

<scroll-view class="scroll-view" scroll-x="true">
  <view class="image-list">
    <image src="https://example.com/image1.jpg"></image>
    <image src="https://example.com/image2.jpg"></image>
    <image src="https://example.com/image3.jpg"></image>
    <image src="https://example.com/image4.jpg"></image>
  </view>
</scroll-view>

2. 在wxss文件中设置scroll-view和image的样式：

.scroll-view {
  width: 100%;
  height: 200rpx;
  overflow-x: scroll;
  white-space: nowrap;
}

.image-list {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 10rpx;
}

其中，scroll-view组件需要设置scroll-x属性为true，使其能够横向滚动。image-list使用inline-flex布局，使其能够横向排列，并设置margin-right属性为10rpx，使图片之间有一定的间距。

3. 在js文件中添加对应的逻辑代码：

Page({
  data: {},

  onLoad: function () {},
})

完成以上步骤后，就可以在微信小程序中实现图片横向滚动了。

微信小程序横向滚动的图片下面还要加文字

实现方式：

1. 在 wxml 文件中添加一个 scroll-view 组件，设置横向滚动。

   <scroll-view class="scroll-view" scroll-x="true">
     <!-- 这里放置横向滚动的内容 -->
   </scroll-view>

2. 在 scroll-view 中添加一个 view 组件作为容器，用来包含图片和文字。

   <scroll-view class="scroll-view" scroll-x="true">
     <view class="item">
       <image class="image" src="图片地址"></image>
       <text class="text">文字内容</text>
     </view>
     <!-- 这里可以添加多个 item -->
   </scroll-view>

3. 在 css 文件中设置 item 的样式，包括宽度、高度、内边距等。

   .item {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 200rpx;
     height: 250rpx;
     padding: 20rpx;
   }

4. 在 css 文件中设置 image 和 text 的样式，包括宽度、高度、字体大小等。

   .image {
     width: 160rpx;
     height: 160rpx;
   }
   
   .text {
     font-size: 28rpx;
     margin-top: 20rpx;
   }

5. 根据需求调整样式和布局即可。

   .scroll-view {
     height: 300rpx;
     background-color: #f2f2f2;
   }