uniapp怎么使用第三方UI庫(kù)uview-plus

這篇文章主要介紹了uniapp怎么使用第三方UI庫(kù)uview-plus的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇uniapp怎么使用第三方UI庫(kù)uview-plus文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

一、使用Album相冊(cè)功能

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

使用起來(lái)，目前存在一個(gè)問(wèn)題是，

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

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

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

二、 picker  選擇器

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

let columns = [ ['中國(guó)', '美國(guó)', '日本'] ];

三、input輸入框 和 Textarea 文本域

在開(kāi)發(fā)使用時(shí)，

第一，border="surround" 邊框無(wú)法顯示，

第二，使用下面例子，就會(huì)報(bào)value等未定義的錯(cuò)誤，很奇怪，即使添加value屬性也報(bào)錯(cuò)

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

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

后來(lái)我就用html的input輸入框自己寫樣式

四、使用textarea

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

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

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

解決辦法如下

<u--textarea 
    : 
	@linechange="handleLinechange" 
	:autoHeight="true"
	v-model="replyContent" 
>
</u--textarea>

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

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

（3）通過(guò)linechange事件，來(lái)設(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，超出就會(huì)產(chǎn)生滾動(dòng)條
		}
	}

關(guān)于“uniapp怎么使用第三方UI庫(kù)uview-plus”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“uniapp怎么使用第三方UI庫(kù)uview-plus”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。