目錄

一、scroll-view

（1）作用

（2）用法

二、swiper和swiper-item

（1）作用

（2）用法

三、text

（1）作用

（2）使用

四、rich-text

（1）作用

（2）使用

五、button

（1）作用

（2）使用

六、image

（1）作用

（2）使用

前言：

本文主要介紹剛學(xué)習(xí)微信小程序需要學(xué)習(xí)的一些基本組件

一、scroll-view

（1）作用

可滾動(dòng)的視圖區(qū)域，常用來(lái)實(shí)現(xiàn)滾動(dòng)列表效果（有橫向滾動(dòng)和縱向滾動(dòng)）

（2）用法

//wxml文件
<scroll-view class="scrollcon" scroll-y>    //這里scroll-y表示縱向滾動(dòng)
  <view>A</view>                            //換成scroll-x表示橫向滾動(dòng)
  <view>B</view>
  <view>C</view>
</scroll-view>

/**index.wxss**/

.scrollcon view{
  /* 這里設(shè)置的寬高表示的是包含的這個(gè)ABC*/
  width: 200px;
  height: 100px;
  text-align: center;
}

.scrollcon view:nth-child(1){
  background-color: lightcoral;
}

.scrollcon view:nth-child(2){
  background-color: lightgreen;
}

.scrollcon view:nth-child(3){
  background-color: lightseagreen;
}

.scrollcon{
  /* 這里設(shè)置的寬高是縱向滾動(dòng)的這個(gè)列表*/
  height: 200px;
  width: 200px;
  border: 1px solid red;
}

二、swiper和swiper-item

（1）作用

實(shí)現(xiàn)輪播圖的效果

（2）用法

<swiper class="swip" indicator-dots indicator-color="white">
<!--第一項(xiàng)-->
 <swiper-item>
   <view class="item">A</view>
 </swiper-item>
  <!--第二項(xiàng)-->
  <swiper-item>
   <view class="item">B</view>
  </swiper-item> 
  <!--第三項(xiàng)-->
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

/**index.wxss**/

.swip{
  height:150px;
}
.item{
  height: 100%;
  text-align: center;
}

swiper-item:nth-child(1) view{
  background-color: lightcoral;
}

swiper-item:nth-child(2) view{
  background-color: lightgray;
}
swiper-item:nth-child(3) view{
  background-color: lightgreen;
}

swiper組件的常用屬性：

    屬性                     說(shuō)明
indicator-dots             是否顯示面板的指示點(diǎn)，默認(rèn)是不顯示的，如果需要使用該值，直接寫上
indicator-color            指示點(diǎn)的顏色
indicator-active-color     當(dāng)前選中的指示點(diǎn)的顏色
autoplay                   是否自動(dòng)切換
interval                   自動(dòng)切換的時(shí)間間隔，單位是毫秒 
circular                   是否采用寫接滑動(dòng)

三、text

（1）作用

文本組件，類似于HTML中的span標(biāo)簽，是一個(gè)行內(nèi)元素

（2）使用

通過(guò)text組件的selectable屬性，可以實(shí)現(xiàn)長(zhǎng)按選中文本內(nèi)容的效果

<text selectable>666</text>

四、rich-text

（1）作用

通過(guò)該組件的nodes節(jié)點(diǎn)，可以吧HTML字符串渲染為對(duì)應(yīng)的UI結(jié)構(gòu)

（2）使用

<rich-text nodes="<h1 style='color: red;'>666</h1>"></rich-text>

五、button

（1）作用

按鈕組件，功能比HTML中的button按鈕豐富，通過(guò)open-type屬性可以調(diào)用微信提供的各種功能（客服，轉(zhuǎn)發(fā)，獲取用戶權(quán)限，獲取用戶信息等等）

（2）使用

<view>
 <!--通過(guò)type指定屬性-->
 <button type="primary">主色調(diào)按鈕</button>
 <button type="warn">警告按鈕</button>
 <button type="default">默認(rèn)按鈕</button>

 <!--通過(guò)size=“mini”小尺寸按鈕-->
 <button type="primary">正常按鈕</button>
 <button type="primary">1</button>
 <button type="primary" size="mini">小尺寸按鈕</button>
 <button type="primary" size="mini">1</button>

 <!--plain鏤空按鈕-->
 <button type="primary" plain>鏤空按鈕</button>
</view>

六、image

（1）作用

圖片組件，默認(rèn)寬度約為300px，高度為240px文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-699869.html

（2）使用

<view>
  <image src="指定圖片的路徑"></image>
</view>

 mode值           說(shuō)明
 scaleToFill    默認(rèn)值，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿image元素
 aspectFit      縮放模式，保持縱橫比，可以將圖片完整的顯示出來(lái)
 aspectFill     保證圖片的短邊顯示出來(lái)，也就是說(shuō)圖片通常只能在水平或者垂直方向上是完整的，另外一個(gè)方向則會(huì)發(fā)生截取
 widthFix       寬度不變，高度自動(dòng)發(fā)生變化，保持原圖的寬高比不會(huì)發(fā)生變化。 
 heightFix      高度不變，寬度會(huì)發(fā)生自動(dòng)變化，保持原圖的寬高比不會(huì)發(fā)生變化

到了這里，關(guān)于微信小程序開(kāi)發(fā)---基本組件的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！