亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序?qū)W習(xí)之常用的視圖組件

 更新時間：2022年11月07日 11:44:11   作者：癮???????????  
但是最近由于開發(fā)人手不夠,一個人開啟全棧,一邊寫接口一邊寫頁面,剛好項目中有一個需求,所以嘗試使用自定義組件開發(fā)這塊,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之常用的視圖組件的相關(guān)資料,需要的朋友可以參考下

一.常用的視圖組件

1.view

  • 普通視圖區(qū)域
  • 類似與HTML中的div，是一個塊級元素
  • 常用來實現(xiàn)頁面的布局效果

 使用效果：

wxml文件：

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

 wxss文件：

.container1 view{
    width: 100px;/*寬*/
    height: 100px;/*高*/
    text-align: center;/*居中*/
    line-height: 100px;/*縱向居中*/
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightgreen;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
/*給三個view加上不同的顏色*/
.container1{
  display: flex;/*將三個view橫向排列*/
  justify-content: space-around;/*橫向分散對其齊*/
}

效果圖：

2.scroll-view

  • 可滾動的視圖區(qū)域
  • 常用來實現(xiàn)滾動列表效果

 使用效果：

wxml文件：

<!-- scroll-y屬性：允許縱向滾動 -->
<!-- scroll-x屬性：允許橫向滾動 -->
<!-- 注意：使用豎向滾動時，必須給scroll-view一個固定高度 -->
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

 wxss文件：

.container1 view{
    width: 100px;/*寬*/
    height: 100px;/*高*/
    text-align: center;/*居中*/
    line-height: 100px;/*縱向居中*/
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightgreen;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
/*給三個view加上不同的顏色*/
.container1{
  border: 1px solid red;
  /*給scroll-view一個固定高度*/
  height: 120px;
  width: 100px;
}

效果圖：

可以使用鼠標(biāo)上下拖動，達(dá)到滾動的效果！  

3.swiper和swiper-item

輪播圖容器組件和輪播圖item組件

 使用效果：

wxml文件：

<!-- 輪播圖區(qū)域 -->
<!-- indicator-dots 屬性：顯示面板指示點(diǎn) -->
<swiper class="swiper-container">
  <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文件：

.swiper-container{
  height: 150px;/*輪播圖高度*/
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
 
swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightblue;
}
swiper-item:nth-child(3) .item{
  background-color: lightcoral;
}

效果圖：

l circular實現(xiàn)銜接滑動，滑倒C，往右滑動回到A，類似循環(huán)隊列??！

 例如：加上 indicator-dots 屬性

<!-- 輪播圖區(qū)域 -->
<!-- indicator-dots 屬性：顯示面板指示點(diǎn) -->
<swiper class="swiper-container" indicator-dots>
  <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>

效果圖：可與上進(jìn)行對比

4.text

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

使用效果：

wxml文件：

<view>
  手機(jī)號支持長按選中保存
  <text selectable>18814231000</text>
</view>
<!-- 只有在text中的文本才能長按保存(必須加上selectable)，view中不可長按保存 -->

 效果圖：

5.rich-text 

  • 富文本組件
  • 支持把HTML字符串渲染為WXML結(jié)構(gòu)

 通過rich-text組件的nodes屬性節(jié)點(diǎn)，把HTML字符串渲染為對應(yīng)的UI結(jié)構(gòu)：

wxml文件：

<view>
  手機(jī)號支持長按選中保存
  <text selectable>18814231000</text>
</view>
<!-- 只有在text中的文本才能長按保存(必須加上selectable)，view中不可長按保存 -->
<rich-text nodes="<h1 style='color:red;'>標(biāo)題<h1>"></rich-text>

效果圖：

6.button

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

使用效果：

wxml文件：

<!-- 按鈕組件的基本使用 -->
<!-- 通過type屬性指定按鈕顏色類型 -->
<button>普通按鈕</button>
<button type="primary">主色調(diào)按鈕</button>
<button type="warn">警告按鈕</button>
 
<!-- size="mini" 小尺寸按鈕 -->
<button size="mini">普通按鈕</button>
<button type="primary" size="mini">主色調(diào)按鈕</button>
<button type="warn" size="mini">警告按鈕</button>
 
<!-- plain 鏤空按鈕 -->
<button size="mini" plain>普通按鈕</button>
<button type="primary" size="mini" plain>主色調(diào)按鈕</button>
<button type="warn" size="mini" plain>警告按鈕</button>

 效果圖：

7.image

  • 圖片組件
  • image組件默認(rèn)高度約300px、高度約240px

使用效果：

wxml文件：

<!-- image 圖片組件 -->
<image></image>
<image src="/images/123.jpg"></image>

wxss文件：

image{
  border: 1px solid red;
}

效果圖：

 例如更改屬性mode為aspectFit，自適應(yīng)的，效果圖：

<!-- image 圖片組件 -->
<image></image>
<image src="/images/123.jpg" mode="aspectFit"></image>

8.navigator

  • 頁面導(dǎo)航組件
  • 類似于HTML中的a鏈接

總結(jié)

到此這篇關(guān)于微信小程序?qū)W習(xí)之常用的視圖組件的文章就介紹到這了,更多相關(guān)微信小程序組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論