uniapp使用第三方UI庫uview-plus的方法

更新時間：2023年04月27日 11:16:35 作者：tengyuxin

uview-plus是uni-app全面兼容nvue的uni-app生態(tài)框架,全面的組件和便捷的工具會讓您信手拈來,下面這篇文章主要給大家介紹了關(guān)于uniapp使用第三方UI庫uview-plus的方法,需要的朋友可以參考下

前言：

開發(fā)uniapp時，有些功能，使用UI庫提供的更加方便和簡單。所以我就搜索uniapp 的UI庫，根據(jù)網(wǎng)上和uniapp的插件市場，確定使用uviewUI庫。

uniapp項(xiàng)目使用的vue2 -----> 對應(yīng) uView

uniapp項(xiàng)目使用vue3 -----> 對應(yīng) uview-plus

一、使用Album相冊功能

我用這個功能開發(fā)類似動態(tài)、朋友圈那種的列表。

使用起來，目前存在一個問題是，

我想實(shí)現(xiàn)的功能是，一排展示3張圖片或 2張圖片時，圖片的大小可以自定義。

解決問題方式1：根據(jù)圖片數(shù)量判斷，設(shè)置multipleSize大小，但排列的方式會變得奇怪。

解決問題方式2：通過rowCount 控制一行展示圖片的數(shù)量，就不能定義圖片大小。

二、 picker 選擇器

在使用u-picker時，uniapp app端數(shù)據(jù)不顯示，后來發(fā)現(xiàn)問題，它的數(shù)據(jù)格式是雙層數(shù)組

let columns = [ ['中國', '美國', '日本'] ];

三、input輸入框和 Textarea 文本域

在開發(fā)使用時，

第一，border="surround" 邊框無法顯示，

第二，使用下面例子，就會報value等未定義的錯誤，很奇怪，即使添加value屬性也報錯

<u--input
	    placeholder="請輸入內(nèi)容"
	    border="surround"
	    clearable
></u--input>

Property "value" was accessed during render but is not defined on instance.

后來我就用html的input輸入框自己寫樣式

四、使用textarea

在開發(fā)時，模仿微信公眾號文章的回復(fù)功能，具體功能描述如下

（1）通過手機(jī)軟鍵盤回車，可以自增高

（2）限制增高的最大高度

解決辦法如下

<u--textarea 
    :style="{height: setTextAreaHeight+'rpx';overflow-y: 'auto'}" 
	@linechange="handleLinechange" 
	:autoHeight="true"
	v-model="replyContent" 
>
</u--textarea>

（1）通過autoHeight設(shè)置了自增高后，還要通過style來設(shè)置height高度，不然自增高和height默認(rèn)高度會沖突，導(dǎo)致輸入完內(nèi)容后自增高就會變成默認(rèn)高度

（2）給textarea設(shè)置 overflow-y: auto屬性，這樣限制自增高后，就會產(chǎn)生滾動條

（3）通過linechange事件，來設(shè)置自增高的高度和限制

let setTextAreaHeight = ref(40); //回復(fù)框的高度設(shè)置
	const handleLinechange = (e)=>{
		if(e.detail.height<=80){
			setTextAreaHeight.value = e.detail.height*2;
		}else{
			setTextAreaHeight.value = 160; //高度最終限制在160rpx，超出就會產(chǎn)生滾動條
		}
	}