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

 更新时间:2023年04月27日 11:16:35   作者:tengyuxin  
uview-plus是uni-app全面兼容nvue的uni-app生态框架,全面的组件和便捷的工具会让您信手拈来,下面这篇文章主要给大家介绍了关于uniapp使用第三方UI库uview-plus的方法,需要的朋友可以参考下

前言:

开发uniapp时,有些功能,使用UI库提供的更加方便和简单。所以我就搜索uniapp 的UI库,根据网上和uniapp的插件市场,确定使用uviewUI库。 

uniapp项目使用的vue2   ----->  对应  uView

 uniapp项目使用vue3    ----->    对应 uview-plus

一、使用Album相册功能

我用这个功能开发类似动态、朋友圈 那种的列表。

使用起来,目前存在一个问题是,

我想实现的功能是,一排展示3张图片 或 2张图片时, 图片的大小可以自定义。

解决问题方式1:根据图片数量判断,设置multipleSize大小,但排列的方式会变得奇怪。

解决问题方式2:通过rowCount 控制一行展示图片的数量,就不能定义图片大小。

二、 picker  选择器

在使用u-picker时,uniapp app端 数据不显示,后来发现问题,它的数据格式是双层数组

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

三、input输入框 和 Textarea 文本域

在开发使用时,

第一,border="surround" 边框无法显示,

第二,使用下面例子,就会报value等未定义的错误,很奇怪,即使添加value属性也报错

<u--input
	    placeholder="请输入内容"
	    border="surround"
	    clearable
></u--input>
Property "value" was accessed during render but is not defined on instance.

后来我就用html的input输入框自己写样式

四、使用textarea

在开发时,模仿微信公众号文章的回复功能,具体功能描述如下

(1)通过手机软键盘回车,可以自增高

(2)限制增高的最大高度

解决办法如下

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

(1)通过autoHeight设置了自增高后,还要通过style来设置height高度,不然自增高和height默认高度会冲突,导致输入完内容后自增高就会变成默认高度

(2)给textarea设置 overflow-y: auto属性,这样限制自增高后,就会产生滚动条

(3)通过linechange事件,来设置自增高的高度 和 限制

let setTextAreaHeight = ref(40); //回复框的高度设置
	const handleLinechange = (e)=>{
		if(e.detail.height<=80){
			setTextAreaHeight.value = e.detail.height*2;
		}else{
			setTextAreaHeight.value = 160; //高度最终限制在160rpx,超出就会产生滚动条
		}
	}

总结

到此这篇关于uniapp使用第三方UI库uview-plus的文章就介绍到这了,更多相关uniapp使用uview-plus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Echarts通过dataset数据集实现创建单轴散点图

    Echarts通过dataset数据集实现创建单轴散点图

    这篇文章主要为大家详细介绍了Echarts如何通过dataset数据集实现创建单轴散点图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-02-02
  • JS数组方法concat()用法实例分析

    JS数组方法concat()用法实例分析

    这篇文章主要介绍了JS数组方法concat()用法,结合实例形式分析了JS数组concat()方法具体功能、用法及操作注意事项,需要的朋友可以参考下
    2020-01-01
  • IE下JS读取xml文件示例代码

    IE下JS读取xml文件示例代码

    JS读取xml文件具体步骤为:创建DOM对象、加载xml文件(仅适用于IE)附示例代码,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • js单独获取一个checkbox看其是否被选中

    js单独获取一个checkbox看其是否被选中

    这篇文章主要与大家分享js获取一个checkbox看其是否被选中的具体实现,很简单,但很实用,需要的朋友可以参考下
    2014-09-09
  • 通过babel操作AST精准插入配置代码全流程

    通过babel操作AST精准插入配置代码全流程

    这篇文章主要为大家介绍了通过babel操作AST精准插入配置代码的全流程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2022-02-02
  • 利用uni-app和uView实现多图上传功能全过程

    利用uni-app和uView实现多图上传功能全过程

    最近在使用uniapp开发的微信小程序中使用了图片上传功能,下面这篇文章主要给大家介绍了关于利用uni-app和uView实现多图上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • JS Web Flex弹性盒子模型代码实例

    JS Web Flex弹性盒子模型代码实例

    这篇文章主要介绍了JS Web Flex弹性盒子模型代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • 利用JS实现scroll自定义滚动效果详解

    利用JS实现scroll自定义滚动效果详解

    这篇文章主要给大家介绍了关于利用JS如何实现scroll自定义滚动效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • JS计算斐波拉切代码实例

    JS计算斐波拉切代码实例

    这篇文章主要介绍了js计算斐波拉切,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript可否多线程? 深入理解JavaScript定时机制

    JavaScript可否多线程? 深入理解JavaScript定时机制

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感
    2012-05-05

最新评论