1 視圖容器

1.1 view

Flex是Flexible Box的縮寫，意為“彈性布局”，用來為盒狀模型提供最大的靈活性。
當設(shè)置display: flex后，繼續(xù)給view等容器組件設(shè)置flex-direction:row或column，就可以在該容器內(nèi)按行或列排布子組件。uni-app推薦使用flex布局, 因為flex布局有利于跨更多平臺，尤其是采用原生渲染的平臺。

1.2 scroll-view

1. scroll-view是區(qū)域滾動，不會觸發(fā)頁面滾動，無法觸發(fā)pages.json配置的下拉刷新、頁面觸底onReachBottomDistance、titleNView的transparent透明漸變
2. 可滾動視圖區(qū)域。用于區(qū)域滾動。
3. 需注意在webview渲染的頁面中，區(qū)域滾動的性能不及頁面滾動。

<template><view><page-head title="scroll-view,區(qū)域滾動視圖"></page-head><view class="uni-padding-wrap uni-common-mt"><view class="uni-title uni-common-mt">Vertical Scroll<text>\n縱向滾動</text></view><view><!-- scroll-top	Number/String		設(shè)置豎向滾動條位置 --><!-- scroll-y	Boolean	false	允許縱向滾動 --><!-- @scrolltoupper	EventHandle		滾動到頂部/左邊，會觸發(fā) scrolltoupper 事件 --><!-- @scrolltolower	EventHandle		滾動到底部/右邊，會觸發(fā) scrolltolower 事件 --><!-- @scroll	EventHandle		滾動時觸發(fā)，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} --><scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"@scroll="scroll"><view id="demo1" class="scroll-view-item uni-bg-red">A</view><view id="demo2" class="scroll-view-item uni-bg-green">B</view><view id="demo3" class="scroll-view-item uni-bg-blue">C</view></scroll-view></view><!-- @tap	(event: MouseEvent) => void	-	手指觸摸后馬上離開 --><!-- @longpress	(event: Event) => void	-	如果一個組件被綁定了 longpress 事件，那么當用戶長按這個組件時，該事件將會被觸發(fā)。 --><view @tap="goTop" class="uni-link uni-center uni-common-mt">點擊這里返回頂部</view><view class="uni-title uni-common-mt">Horizontal Scroll<text>\n橫向滾動</text></view><view><scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120"><view id="demo1" class="scroll-view-item_H uni-bg-red">A</view><view id="demo2" class="scroll-view-item_H uni-bg-green">B</view><view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view></scroll-view></view><view class="uni-common-pb"></view></view></view>
</template>

自定義下拉刷新

• 注意，在webview渲染時，自定義下拉刷新的性能不及pages.json中配置的原生下拉刷新。

1.3 pages.json中配置的原生下拉刷新

實現(xiàn)思路：
第一步，在pages.json中配置該頁面，允許進行下拉刷新
第二步，在下拉刷新的生命周期函數(shù)中，處理邏輯

1. 在pages.json中配置該頁面，允許進行下拉刷新

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁",//設(shè)置頁面標題文字"enablePullDownRefresh":true//開啟下拉刷新}},...]
}

2. 在下拉刷新的生命周期函數(shù)中，處理邏輯

onPullDownRefresh() {console.log('onPullDownRefresh');this.initData();
},

1.4swiper

滑塊視圖容器。一般用于左右滑動或上下滑動，比如banner輪播圖。

注意滑動切換和滾動的區(qū)別，滑動切換是一屏一屏的切換。swiper下的每個swiper-item是一個滑動切換區(qū)域，不能停留在2個滑動區(qū)域之間。

		<view class="uni-margin-wrap"><!-- circular	Boolean	false	是否采用銜接滑動，即播放到末尾后重新回到開頭 --><!-- indicator-dots	Boolean	false	是否顯示面板指示點 --><!-- autoplay	Boolean	false	是否自動切換 --><!-- interval	Number	5000	自動切換時間間隔 --><!-- duration	Number	500	滑動動畫時長 --><swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"><swiper-item><view class="swiper-item uni-bg-red">A</view></swiper-item><swiper-item><view class="swiper-item uni-bg-green">B</view></swiper-item><swiper-item><view class="swiper-item uni-bg-blue">C</view></swiper-item></swiper></view>

2 基礎(chǔ)內(nèi)容

2.1 icon圖標

uniapp中自帶的icon很少，不管哪個UI框架都有這個問題，最好就是引用來自iconfont之類的自定義項目文件，我見過很多項目是將文件直接下載下來使用，弊端是操作麻煩，顏色不可修改，只能用已下載的顏色，最好的方式當然是使用字體文件來實現(xiàn)，這里就詳細說下操作流程

方案步驟
步驟主要分兩塊，一塊是iconfont上的項目管理，一塊是本地uniapp項目中的配置

iconfont端
iconfont端主要分3步：

1. 創(chuàng)建項目
   

2. 選擇圖標
   

3. 導(dǎo)出字體文件
   

項目端引用
項目端引用主要分3步:
4. 文件下載

5. CSS引用
   然后進入到App.vue中的style進行CSS引用

<style>@import '@/static/icon/iconfont.css'; 
</style>

6. CSS引用路徑修改

這里是個小坑，因為默認網(wǎng)頁中css引用當前文件夾下的字體文件是沒問題的，但是在uniapp中需要去修改iconfont.css中的引用字體的文件位置

@font-face {font-family: "iconfont"; /* Project id 3355581 */src: url(iconfont.woff2?t=1650891154292') format('woff2'),url('iconfont.woff?t=1650891154292') format('woff'),url('iconfont.ttf?t=1650891154292') format('truetype');
}

改為如下（記得按你自己的路徑來修改）

@font-face {font-family: "iconfont"; /* Project id 3355581 */src: url('/static/icon/iconfont.woff2?t=1650891154292') format('woff2'),url('/static/icon/iconfont.woff?t=1650891154292') format('woff'),url('/static/icon/iconfont.ttf?t=1650891154292') format('truetype');
}

至此就可以在前端進行引用了，eg:

		<view><view class="iconfont icon-huiju2" style="font-size: 100rpx; color: green;;"></view></view>

2.2 text組件

文本組件。用于包裹文本內(nèi)容。

• 支持 \n 方式換行。

			<view class="text-box"><text>{{text}}</text></view>

2.3 rich-text

富文本。支持默認事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

	export default {data() {return {title: 'rich-text',nodes: [{// name	標簽名	String	是	支持部分受信任的 HTML 節(jié)點name: 'div',// attrs	屬性	Object	否	支持部分受信任的屬性，遵循 Pascal 命名法attrs: {class: 'div-class',style: 'line-height: 60px; color: red; text-align:center;'},// children	子節(jié)點列表	Array	否	結(jié)構(gòu)和 nodes 一致children: [{type: 'text',text: 'Hello&nbsp;uni-app!'}]}],strings: '<div style="text-align:center;"><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'}}}

• nodes 不推薦使用 String 類型，性能會有所下降。
• rich-text 組件內(nèi)屏蔽所有節(jié)點的事件。所以如果內(nèi)容中有鏈接、圖片需要點擊，則不能使用rich-text
• attrs 屬性不支持 id ，支持 class

2.4 progress

進度條。

        <view class="uni-padding-wrap uni-common-mt"><view class="progress-box"><!-- 屬性名	    類型	   默認值	說明 --><!-- percent	Number	無	百分比0~100 --><!-- show-info	Boolean	false	在進度條右側(cè)顯示百分比 --><!-- stroke-width	Number	6	進度條線的寬度，單位px --><progress :percent="pgList[0]" show-info stroke-width="3" /></view><view class="progress-box"><progress :percent="pgList[1]" stroke-width="3" /><uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons></view><view class="progress-box"><progress :percent="pgList[2]" stroke-width="3" /></view><view class="progress-box"><!-- activeColor	Color	#09BB07（百度為#E6E6E6）	已選擇的進度條的顏色 --><progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" /></view><view class="progress-control"><button type="primary" @click="setProgress">設(shè)置進度</button><button type="warn" @click="clearProgress">清除進度</button></view></view>

3 表單組件

3.1 button

button 組件的點擊遵循 vue 標準的 @click事件。

button 組件沒有 url 屬性，如果要跳轉(zhuǎn)頁面，可以在@click中編寫，也可以在button組件外面套一層 navigator 組件。舉例，如需跳轉(zhuǎn)到about頁面，可按如下幾種代碼寫法執(zhí)行：

<template><view><navigator url="/pages/about/about"><button type="default">通過navigator組件跳轉(zhuǎn)到about頁面</button></navigator><button type="default" @click="goto('/pages/about/about')">通過方法跳轉(zhuǎn)到about頁面</button><button type="default" @click="navigateTo('/pages/about/about')">跳轉(zhuǎn)到about頁面</button><!-- 這種寫法只有h5平臺支持，不跨端，不推薦使用 --></view>
</template>
<script>export default {methods: {goto(url) {uni.navigateTo({url:url})}}}
</script>

3.2 checkbox-group

多項選擇器，內(nèi)部由多個 checkbox 組成。

<template><view><page-head :title="title"></page-head><view class="uni-padding-wrap uni-common-mt"><view class="uni-title uni-common-mt">默認樣式</view><view><checkbox-group><label><!-- checked	Boolean	false	當前是否選中，可用來設(shè)置默認選中 --><checkbox value="cb1" checked="true" />選中</label><label><checkbox value="cb" />未選中</label></checkbox-group></view><view class="uni-title uni-common-mt">不同顏色和尺寸的checkbox</view><view><checkbox-group><label><checkbox value="cb1" checked="true" color="#FFCC33" style="transform:scale(0.7)" />選中</label><label><!-- color	Color	checkbox的顏色，同css的color --><checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未選中</label></checkbox-group></view></view><view class="uni-padding-wrap"><view class="uni-title uni-common-mt">推薦展示樣式<text>\n使用 uni-list 布局</text></view></view><!-- .uni-list {background-color: #FFFFFF;position: relative;width: 100%;display: flex;flex-direction: column;} --><view class="uni-list"><!-- @change	EventHandle	<checkbox-group>中選中項發(fā)生改變是觸發(fā) change 事件 --><checkbox-group @change="checkboxChange"><label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value"><view><checkbox :value="item.value" :checked="item.checked" /></view><view>{{item.name}}</view></label></checkbox-group></view></view>
</template>
<script>export default {data() {return {title: 'checkbox 復(fù)選框',items: [{value: 'USA',name: '美國'},{value: 'CHN',name: '中國',checked: 'true'},{value: 'BRA',name: '巴西'},{value: 'JPN',name: '日本'},{value: 'ENG',name: '英國'},{value: 'FRA',name: '法國'}]}},methods: {checkboxChange: function(e) {console.log('e = ', e);var items = this.items,values = e.detail.value;for (var i = 0, lenI = items.length; i < lenI; ++i) {const item = items[i]if (values.indexOf(item.value) >= 0) {this.$set(item, 'checked', true)} else {this.$set(item, 'checked', false)}}}}}
</script><style>/* justify-content是用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。它常用于CSS的Flexbox布局。以下是justify-content的常用屬性值：flex-start：默認值，項目位于容器的開頭。flex-end：項目位于容器的結(jié)尾。center：項目位于容器的中心。space-between：項目位于各行之間留有空白的容器內(nèi)，第一行在容器開頭，最后一行在容器結(jié)尾。space-around：每個項目的左右撐開距離相等，項目與項目之間以及頭尾的間距相等。space-evenly：每個間距，均勻分布為容器寬度的一半。需要注意的是，justify-content屬性在Internet Explorer和Safari瀏覽器中不被支持。 */.uni-list-cell {justify-content: flex-start}
</style>

3.3 editor

富文本編輯器，可以對圖片、文字格式進行編輯和混排。

3.4 form

表單，將組件內(nèi)的用戶輸入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

當點擊 <form> 表單中 formType 為 submit 的 <button> 組件時，會將表單組件中的 value 值進行提交，需要在表單組件中加上 name 來作為 key。

<template><view><page-head title="form"></page-head><view class="uni-padding-wrap uni-common-mt"><form @submit="formSubmit" @reset="formReset"><view class="uni-form-item uni-column"><view class="title">姓名</view><!-- .uni-input {height: 50rpx;padding: 15rpx 25rpx;line-height:50rpx;font-size:28rpx;background:#FFF;flex: 1;} --><!-- flex: 1表示項目的放大比例和縮小比例都為1，即當存在剩余空間時，該項目將自動放大以占據(jù)更多的空間，而在超出父容器時，超出部分將等分縮小的比例。這是一種常用的自適應(yīng)布局方式，可以將父容器的空間自動分配給子元素，以達到自動調(diào)整布局的效果。 --><input class="uni-input" name="nickname" placeholder="請輸入姓名" /></view><view class="uni-form-item uni-column"><view class="title">性別</view><radio-group name="gender"><label><radio value="男" /><text>男</text></label><label><radio value="女" /><text>女</text></label></radio-group></view><view class="uni-form-item uni-column"><view class="title">愛好</view><checkbox-group name="loves"><label><checkbox value="讀書" /><text>讀書</text></label><label><checkbox value="寫字" /><text>寫字</text></label></checkbox-group></view><view class="uni-form-item uni-column"><view class="title">年齡</view><slider value="20" name="age" show-value></slider></view><view class="uni-form-item uni-column"><view class="title">保留選項</view><view><switch name="switch" /></view></view><view class="uni-btn-v"><button form-type="submit">Submit</button><button type="default" form-type="reset">Reset</button></view></form></view></view>
</template>
<script>import graceChecker from "../../../common/graceChecker.js"export default {data() {return {}},methods: {formSubmit: function(e) {console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：' + JSON.stringify(e.detail.value))//定義表單規(guī)則var rule = [{name:"nickname", checkType : "string", checkRule:"1,3",  errorMsg:"姓名應(yīng)為1-3個字符"},{name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"請選擇性別"},{name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"請選擇愛好"}];//進行表單檢查var formData = e.detail.value;var checkRes = graceChecker.check(formData, rule);if(checkRes){uni.showToast({title:"驗證通過!", icon:"none"});}else{uni.showToast({ title: graceChecker.error, icon: "none" });}},formReset: function(e) {console.log('清空數(shù)據(jù)')}}}
</script><style>.uni-form-item .title {padding: 20rpx 0;}
</style>

解讀一下代碼：

<form @submit="formSubmit" @reset="formReset">

			formSubmit: function(e) {console.log('e = ', e);console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：' + JSON.stringify(e.detail.value))//定義表單規(guī)則var rule = [{name:"nickname", checkType : "string", checkRule:"1,3",  errorMsg:"姓名應(yīng)為1-3個字符"},{name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"請選擇性別"},{name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"請選擇愛好"}];//進行表單檢查var formData = e.detail.value;var checkRes = graceChecker.check(formData, rule);if(checkRes){uni.showToast({title:"驗證通過!", icon:"none"});}else{uni.showToast({ title: graceChecker.error, icon: "none" });}}

為方便做表單驗證，uni ui提供了組件，參考：https://ext.dcloud.net.cn/plugin?id=2773

3.5 uni-forms