目录
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;
}
效果: