快捷導(dǎo)航

uniapp使用第三方UI庫(kù)uview-plus的方法

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

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

前言：

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

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

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

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

我用這個(gè)功能開發(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 文本域

在開發(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

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

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

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

解決辦法如下

<u--textarea 
    :style="{height: setTextAreaHeight+'rpx';overflow-y: 'auto'}" 
	@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)條
		}
	}