1. 常見組件

• 重點講解小程式中常用的布局組件
  

1.1 view

代替 原來的div標簽

<!-- pages/index/index.wxml -->
<view hover->
    點擊我試試
</view>

/* pages/index/index.wxss */
.h-class{
  color: green;
}

1.2 text

1. 文本標簽
2. 只能嵌套text
3. 長按文字可以復制 (只有該標簽有這個功能)
4. 可以對空格 回車 進行編碼

  <!-- text 標簽測驗 -->
  <text selectable="false" decode="false">
    普&nbsp;通
  </text>

1.3 image

1. 圖片標簽, image組件默認寬度320px、高度240px
2. 支持懶加載

mode有效值:

• model 有13種模式,其中4種是縮放模式, 9種是裁剪模式

1.4 swiper

微信內置輪播圖組件

• swiper : 塊視圖容器，
• swiper-item: 滑塊, 默認寬度和?度都是100%

• 默認寬度 100% 高度150px

<!-- 
"pages/SwiperText/SwiperText.wxml",
1. 輪播圖的外層容器: swiper
2. 每一個輪播項: swiper-item
3. swiper存在默認樣式 
    - width: 100%
    - height: 150px image 存在默認寬度和高度 320 * 240
4. swiper 高度無法實作由內容撐開
5. 先找出來原圖的高度和寬度, 等比例給swiper定寬度和高度
    - 原圖的寬高880 * 388
    - swiper寬度 / swiper 高度 = 原圖寬度 / 原圖高度
    - swiper高度  = swiper 寬度 * 原圖的高度 / 原圖的寬度
      height : calc(100vw * 338 / 880)

 -->
<swiper indicator-dots="true" autoplay>
  <swiper-item>
    <image mode="widthFix" src="https://i0.hdslb.com/bfs/feed-admin/5ef9aa23c480cf40998be6f0897bcad4ad8e8e3f.jpg@880w_388h_1c_95q">
    </image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="	https://i0.hdslb.com/bfs/feed-admin/c7c308997d904ec7770062fb0e2062dfeaf54f89.png@880w_388h_1c_95q">
    </image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="	https://i0.hdslb.com/bfs/feed-admin/5f60c09eb96f604bc4fc8ea78ef5b3be6ef67963.png@880w_388h_1c_95q">
    </image>
  </swiper-item>
</swiper>

/* pages/SwiperText.wxss */
swiper{
  width: 100%;
  height : calc(100vw * 338 / 880)
}
image{
  width: 100%;
}

1.5 navigator

導航組件 類似超鏈接標簽

• open-type 有效值:

<!--pages/navigatorText/navigatorText.wxml-->
<!-- 
  導航組件: navigator
  0 相當于一個塊級元素, 默認會換行 可以直接加寬高
  1. url: 要跳轉的頁面路徑 絕對路徑|相對路徑
  2. target: 要跳轉到當前小程式頁面 還是其他的小程式頁面
        self: 默認值 自己
        miniProgram: 其他的小程式頁面
  3. open-type: 跳轉的方式
 -->
<view>
  <navigator url="/pages/SwiperText/SwiperText">輪播圖頁面</navigator>
  <navigator url="/pages/SwiperText/SwiperText">輪播圖頁面</navigator>
</view>

1.6 rich-text

富文本標簽

可以將字串決議成 對應標簽, 類似Vue 中v-html功能

<!--pages/RichText/RichText.wxml-->
<!-- 1. 加載 節點陣列-->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
<!-- 2.加載 字串 -->
<rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/[email protected]
ng" alt="">'></rich-text>

// index.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
     },
      children: [{
        type: 'text',
        text: 'Hello World!'
     }]
   }]
 },
  tap() {
    console.log('tap')
 }
})

1.6.1 nodes 屬性

nodes屬性支持 字串和標簽節點陣列

文本節點: type = text

• nodes不推薦使用String型別, 性能會有所下降
• rich-text 組件內屏蔽所有節點的事件
• attrs屬性不支持id, 支持 class
• name 屬性大小寫不敏感
• 如果使用了不受信任的html'節點, 該節點及其所有子節點將會被移除
• img標簽僅支持網路圖片

1.7 button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>

1.7.1 size 的合法值

1.7.2 type 的合法值

1.7.3 form-type的合法值

1.7.4 open-type 的合法值

1.8 icon

js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
   ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
 }

wxml

<view >
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
<view >
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>
<view >
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

1.9 radio

可以通過 color屬性來修改顏色

需要搭配 radio-group ?起使?

1.10. checkbox

可以通過 color屬性來修改顏色

需要搭配 checkbox-group ?起使?

標籤：其他

上一篇：第 31 題：以上十種排序演算法的區別有哪些？

下一篇：介紹一種組件拆分方法