微信小程序基础组件

目录

view组件

scroll-view

swiper和swiper-item

---

view组件

 view标签相当于html中的div标签，可以为view标签进行元素的样式调整，即可以设置class，在wxss文件中进行class类的元素样式调整

基础属性（一般不会用到）：

代码例子：

wxml代码：

<view class="test1">
  这是一个view容器
</view>

wxss代码：

.test1{
  height: 300px;
  width: 300px;
  background-color: lightblue;
  color: red;
}

效果：

scroll-view

可滚动视图区域。也就是当容器里的内容超过了容器限制的大小，就可以通过滑动的方式来浏览超出容器范围的内容。

常用属性：

例子：

1.纵向滚动（scroll-y属性）

wxml代码：

<!-- 纵向滚动需要设置scroll-view高度 -->
<scroll-view scroll-y style="height: 200px;width: 100px;">
 <view style="background: lightpink; width: 100px; height: 100px" ></view>
 <view style="background: lightgreen; width: 100px; height: 100px"></view>
 <view style="background: lightblue; width: 100px; height: 100px"></view>
 <view style="background: lightyellow; width: 100px; height: 100px"></view>
</scroll-view>

 效果：

 2.横向滚动（scroll-x）

wxml代码：

<!-- 横向滚动 需要设置scroll-view宽度-->
<scroll-view scroll-x style=" white-space: nowrap; display: flex ;width: 200px;margin-top: 100px;" >
<!-- 这里设置flex属性：inline-block，使所有元素都在同一行显示-->
 <view style="background: red; width: 100px; height: 100px; display: inline-block" ></view>
 <view style="background: green; width: 100px; height: 100px; display: inline-block"></view>
 <view style="background: blue; width: 100px; height: 100px; display: inline-block"></view>
 <view style="background: yellow; width: 100px; height: 100px; display: inline-block"></view>
</scroll-view>

效果图：

swiper和swiper-item

swiper：滑块视图容器，其中只可放置swiper-item组件 。也就是轮播图

常用属性：

例子：

xwml代码：

<!--indicator-dots:导航点  indicator-color:导航点颜色（未访问）
indicator-active-colo:导航点颜色（访问）
autplay:自动切换(默认5秒)
interval:自动切换时间（ms）
circular:是否支持轮回切换（最后一个切回到第一个）手动情况下
-->
<swiper class="swiper" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="2000"
circular
>
  <swiper-item  >
    <view class="item">
      A
    </view>
  </swiper-item>
  <swiper-item>
    <view class="item">
      B
    </view>
  </swiper-item>
  <swiper-item>
    <view class="item">
      C
    </view>
  </swiper-item>
</swiper>

 wxss代码：
（nth-child(n):结构伪类选择器，选择父元素中的第个子元素，然后进行wxss样式修改）

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}
.swiper {
  height: 150px;
}
swiper-item:nth-child(1) .item {
  background-color: lightblue;
}
swiper-item:nth-child(2) .item {
  background-color: lightgreen;
}swiper-item:nth-child(3) .item {
  background-color: lightpink;
}

效果：