1.常用的視圖容器組件
??view類似于div進行使用
<div></div>====<view></view>??scroll-view實現滾動列表效果
-
<scroll-view scroll-y> -
<view></view> -
<view></view> -
<view></view> -
</scroll-view>
? ? ? ? ? ? ? ? 注意：在樣式中必須給scroll-view加一個固定高度
? ? ? ? ? ? scroll-y:縱向滾動? ??scroll-x:橫向滾動??
swiper和swiper-item輪播圖容器組件和輪播圖item組件
-
<swiper> -
<swiper-item> -
<view>A</view> -
</swiper-item> -
<swiper-item> -
<view>A</view> -
</swiper-item> -
<swiper-item> -
<view>A</view> -
</swiper-item> -
<swiper>
其中 swiper可接收不同屬性
2.常見的基礎內容組件
?text:類似于span，長按選中復制只能在text節點下??例如
<text selectable>長按復制文本<text>? ? ? ??新版本把selectable替換成了 user-select 文章發布之時selectable可用
rich-text:把html渲染為UI結構
四. 模板語法
在頁面中渲染數據時所用到的一系列語法叫做模板語法，對應到 Vue 中就是指令的概念。
4.1 數據綁定
-
插值?
{{}}小程序中無論是屬性的綁定還是內容的綁定都必須要使用?
{{}}。--1. 屬性綁定 <switch checked="{{false}}" /> --2. 類名綁定 <view class="{{isActive ? 'active' : ''}}" >首頁</view> --3. 內容綁定 <text>{{ msg }}</text> -
簡易數據綁定
model:value="{{數據名}}"?語法實現了雙向的數據綁定，但是目前只能用在?input?和?textarea?組件中。
4.2 條件渲染
-
控制屬性：相當于 Vue 中指令的概念，在小程序中做控制屬性
wx:if?根據表達式的值渲染內容，值為真時顯示wx:elif?條件語句wx:else?用在?wx:if?的后面，不可單獨使用，wx:if?表達式值為假時顯示
<!-- 條件渲染 wx:if --> <view wx:if="{{result===1}}">剪刀</view> <view wx:elif="{{result===2}}">石頭</view> <view wx:else>布</view> -
組件屬性：相當于vue 中的 v-show
hidden?根據表達式的值渲染內容，值為真時隱藏- 通過?
[hidden] { display: none; }?來實現內容的隱藏
<!-- 隱藏 hidden --> <view hidden="{{result===2}}">測試hidden</view> <!-- 如果條件頻繁切換,用hidden 不頻繁 wx:if wx:elif wx:else -->
4.3 循環渲染
wx:for?根據數組重復渲染組件內容index?默認值，訪問數組的索引值item?默認值，訪問數組的單元值
wx:key?列表項的唯一標識符（不使用 {{}}）- 數組單元是對象時，只需要寫屬性名
- 數組單元是簡單類型時，推薦使用?
*this
wx:for-index?自定義訪問數組索引的變量名wx:for-item?自定義訪問數組單元的變量名
<!-- 列表渲染 循環 對象-->
<!-- wx:for="{{數據}}" 默認的 item 項 index 索引 -->
<!-- 如果item index 和其他名稱沖突, 可以用 wx:for-item 和 wx:for-index 對默認的item index的名稱進行修改 -->
<!-- wx:key 直接就填 字段名就可以了 -->
<view wx:for="{{students}}" wx:key="id">索引:{{index}} 姓名: {{item.name}}---年齡:{{item.age}}
</view>
<!-- 數組 -->
<!-- 簡單數據, wx:key 想要用自身的數據來顯示 用 *this -->
<view wx:for="{{history}}" wx:key="*this">{{item}}
</view>
