一、视图容器
1、打横滑动、打竖滑动
<!-- scroll-x 打横滑动 -->
<!-- scroll-y 打竖滑动 -->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
/* 打横滑动需要 */
/* display: inline-block; */
}
.container1 view:nth-child(1) {
background-color: blue;
}
.container1 view:nth-child(2) {
background-color: blueviolet;
}
.container1 view:nth-child(3) {
background-color: cyan;
}
/* 打横滑动 */
/* .container1 {
border: 1px solid red;
white-space: nowrap;
width: 120px;
height: 100px;
} */
.container1 {
border: 1px solid red;
white-space: nowrap;
width: 100px;
/* 强制高度 */
height: 120px;
}
2、轮播图
<swiper class="swiper-container" 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-item>
<image src="/images/1.jpg"></image>
</swiper-item>
</swiper>
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
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;
}
二、text组件
三、按钮
1、mode属性