学习日记——微信小程序view使用

Wxml中

① view

⚫ 普通视图区域

⚫ 类似于 HTML 中的 div，是一个块级元素

⚫ 常用来实现页面的布局效果

② scroll-view

⚫ 可滚动的视图区域

⚫ 常用来实现滚动列表效果

要在 <scroll-view> 中只让特定区域滚动，可以通过设置 style 属性和 scroll-view 的高度来实现。具体方法如下：

首先，给 <scroll-view> 添加一个固定高度的样式，例如：

<scroll-view class="summary-area" style="height: 300rpx;" scroll-y>
  <!-- 这里是需要滚动的内容 -->
</scroll-view>

在这个示例中，我们给 <scroll-view> 添加了一个样式 style="height: 300rpx;"，将其高度设置为 300rpx。该高度可以根据实际情况进行调整，以确保滚动的区域大小符合需求。

然后，在需要滚动的区域（例如一个 <view> 元素）中添加样式 overflow: auto;，例如：

<scroll-view class="summary-area" style="height: 300rpx;" scroll-y>
  <view class="scrollable-content" style="overflow: auto;">
    <!-- 这里是需要滚动的内容 -->
  </view>
</scroll-view>

在这个示例中，我们在一个 <view> 元素中添加了样式 overflow: auto;，使其能够自动出现滚动条并支持纵向滚动。其他元素仍然保持原样，不受滚动影响。

③ swiper 和 swiper-item

⚫ 轮播图容器组件 和 轮播图 item 组件