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