微信小程序组件

<view>

<view class="contain">
<view> A</view>
<view>B</view>
<view>C</view>
</view>

在wxss中
.contain view{
    height:100px;
    width : 100px;
    text-line:center;
    line-height: 100px;
}

.contain view:nth-child(1)
{
    background-color: springgreen;
}
.contain view:nth-child(2)
{
    background-color: lightskyblue;
}
.contain view:nth-child(3)
{
    background-color: lightpink;
}
.contain{
    display:flex; /*横向布局*/
    justify-content: space-around; /*分散布局*/
    
}

<swiper>

实现滚动， 

scroll-y:纵向滚动 在纵向滚动时，必须给scroll-view加一个固定的height

<scroll-view class="contain" scroll-y="true">
<view> A</view>
<view>B</view>
<view>C</view>
</scroll-view>

/*在wxss中*/
.contain view{
    height:100px;
    width : 100px;
    text-line:center;
    line-height: 100px;
}

.contain view:nth-child(1)
{
    background-color: springgreen;
}
.contain view:nth-child(2)
{
    background-color: lightskyblue;
}
.contain view:nth-child(3)
{
    background-color: lightpink;
}
.contain{
    border:1px, solid, red;
    width:100px;
    height: 120px;
    
}

swiper和swiper-item轮播图

<!--轮播图-->
<swiper class="swiper-contain" indicator-dots="true" indicator-color="white" autoplay circular="true">
<!-- 第一个轮播图 -->
<swiper-item>
<view class="item1">A</view>
</swiper-item>
<!-- 第二个轮播图 -->
<swiper-item>
<view class="item2">B</view>
</swiper-item>
<!-- 第三个轮播图 -->
<swiper-item>
<view class="item3">C</view>
</swiper-item>
</swiper>
/*在wxss中*/
.swiper-contain{
    height:150px;
}
.item3{
     height:100%;
     line-height: 150px;
     text-align:center;
         background-color: lightpink;
}
.item1{
    height:100%;
    line-height: 150px;
    text-align:center;
    background-color: lightskyblue;
}
.item2{
    height:100%;
    line-height: 150px;
    text-align:center;
    background-color:springgreen;
}

 

 text和rich-text

<view>
长按
<text user-select>124983</text>  /*user-select长按复制*/
</view>

<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>

使用nodes 

button

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<!-- size -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

<!-- plain    镂空 -->
<button plain="true">普通按钮</button>
<button type="primary" plain="true">主色调按钮</button>
<button type="warn" plain="true">警告按钮</button>

 

image

 

<image src="/images/liu.png" mode=“aspectFill”></image> 

image{
    border-style:solid;
}