uniapp使用第三方UI庫uview-plus的方法
前言：
開發(fā)uniapp時(shí)，有些功能，使用UI庫提供的更加方便和簡(jiǎn)單。所以我就搜索uniapp 的UI庫，根據(jù)網(wǎng)上和uniapp的插件市場(chǎng)，確定使用uviewUI庫。
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)、朋友圈 那種的列表。
使用起來，目前存在一個(gè)問題是，
我想實(shí)現(xiàn)的功能是，一排展示3張圖片 或 2張圖片時(shí)， 圖片的大小可以自定義。
解決問題方式1：根據(jù)圖片數(shù)量判斷，設(shè)置multipleSize大小，但排列的方式會(huì)變得奇怪。
解決問題方式2：通過rowCount 控制一行展示圖片的數(shù)量，就不能定義圖片大小。
二、 picker 選擇器
在使用u-picker時(shí)，uniapp app端 數(shù)據(jù)不顯示，后來發(fā)現(xiàn)問題，它的數(shù)據(jù)格式是雙層數(shù)組
let columns = [ ['中國(guó)', '美國(guó)', '日本'] ];
三、input輸入框 和 Textarea 文本域
在開發(fā)使用時(shí)，
第一，border="surround" 邊框無法顯示，
第二，使用下面例子，就會(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.
后來我就用html的input輸入框自己寫樣式
四、使用textarea
在開發(fā)時(shí)，模仿微信公眾號(hào)文章的回復(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)高度會(huì)沖突，導(dǎo)致輸入完內(nèi)容后自增高就會(huì)變成默認(rèn)高度
（2）給textarea設(shè)置 overflow-y: auto屬性，這樣限制自增高后，就會(huì)產(chǎn)生滾動(dòng)條
（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，超出就會(huì)產(chǎn)生滾動(dòng)條
}
}總結(jié)
到此這篇關(guān)于uniapp使用第三方UI庫uview-plus的文章就介紹到這了,更多相關(guān)uniapp使用uview-plus內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript初學(xué)者需要了解10個(gè)小技巧
在之前的編程語言排行榜中，我們?cè)榻B過轉(zhuǎn)正在即的JavaScript語言，正如文章中闡明的那樣，JavaScript不僅是最具活力的腳本語言，還是是最有用的編程語言之一。2010-08-08
Bootstrap面板（Panels）的簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap面板（Panels）的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了bootstrap datepicker的基本使用教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
通過實(shí)例了解JS執(zhí)行上下文運(yùn)行原理
這篇文章主要介紹了通過實(shí)例了解JS執(zhí)行上下文運(yùn)行原理,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
本文為大家介紹下如何改變隱藏的input中value的值，一句代碼就可以實(shí)現(xiàn)，感性的朋友可以參考下2013-12-12
原生JS實(shí)現(xiàn)手動(dòng)輪播圖效果實(shí)例代碼
手動(dòng)輪播圖，為輪播圖中的一種，輪播圖主要有無縫輪播，手動(dòng)輪播，延遲輪播，切換輪播等等，輪播圖主要用于展現(xiàn)圖片，新出商品，詞條，又能美觀網(wǎng)頁。給網(wǎng)頁中增加動(dòng)態(tài)效果。接下來通過本文給大家分享原生JS實(shí)現(xiàn)手動(dòng)輪播圖的實(shí)例代碼，一起看看吧2018-11-11
js中的原型與原型鏈應(yīng)該是老生常談的話題了，在前端面試中基本都是必問的一個(gè)問題，但是很多人還是稀里糊涂的，只知道其表層含義。本文將帶大家深入了解JavaScript中的原型與原型鏈，感興趣的可以學(xué)習(xí)一下2022-11-11
微信小程序?qū)崿F(xiàn)側(cè)邊欄二級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)側(cè)邊欄二級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
點(diǎn)擊按鈕自動(dòng)加關(guān)注的代碼(sina微博/QQ空間/人人網(wǎng)/騰訊微博)
本篇文章主要介紹了點(diǎn)擊按鈕自動(dòng)加關(guān)注代碼(sina微博/QQ空間/人人網(wǎng)/騰訊微博) 需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
JavaScript數(shù)組Array的一些常用方法總結(jié)
JavaScript的Array對(duì)象是用于構(gòu)造數(shù)組的全局對(duì)象,數(shù)組是類似于列表的高階對(duì)象,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組Array的一些常用方法,需要的朋友可以參考下2021-11-11