uniApp uViewUi库引入

uniUi自带的样式效果目前满足不了开发,逛插件市场发现了宝藏Ui库

uViewUi  官网地址https://www.uviewui.com/components/intro.html

引入指南  -> 

由于uView使用easycom模式,让您无需引入组件即可直接使用,但是此功能需要Hbuilder X 2.5.5及以上版本才支持,详见配置easycom组件模式。 easycom打包的时候是按需引入的,您可以放心引入uView的整个组件库,发布打包时会自动剔除您没有使用的组件(注意:调试时仍然是全部引入的)

请确保您下载的Hbuilder X为APP开发版,而非标准版,并且在"工具-插件安装"中安装了"scss/sass编译"插件

https://ext.dcloud.net.cn/plugin?id=1593  首先下载插件zip 解压里面的uview-ui 提一下我是uni直接创建的项目,如果是cil创建的参考官网 。

1. 引入uView主JS库
在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);


2. 在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';
#3. 引入uView基础样式
注意!

在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>
#4. 配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。

温馨提示

uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。


Page.JSON 文件中 -> 
"easycom": {
			"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
		},
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "XXXXX",
				"enablePullDownRefresh": false//禁止下拉刷新   
			}

		},

期待组件库在实际开发的表现。

uView的Picker组件是一个类似于原生select的选择器,可以用来选择某个选项。使用Picker组件需要以下步骤: 1. 在需要使用Picker组件的页面中引入Picker组件: ```vue <template> <view> <picker></picker> </view> </template> <script> import { Picker } from 'uview-ui' export default { components: { Picker } } </script> ``` 2. 在Picker组件中设置数据源和事件监听: ```vue <template> <view> <picker :list="list" @change="onChange"></picker> </view> </template> <script> import { Picker } from 'uview-ui' export default { components: { Picker }, data() { return { list: ['选项1', '选项2', '选项3'] } }, methods: { onChange(index) { console.log(index) } } } </script> ``` 在上面的例子中,设置了一个list数组作为Picker的数据源,同时设置了一个change事件监听器,当用户选择某个选项时,会触发change事件并传递选项的索引值作为参数。 3. 可以通过props设置Picker的样式和其他属性: ```vue <template> <view> <picker :list="list" :title="title" :height="height" :confirm-text="confirmText" :cancel-text="cancelText" :value="value" @change="onChange" ></picker> </view> </template> <script> import { Picker } from 'uview-ui' export default { components: { Picker }, data() { return { list: ['选项1', '选项2', '选项3'], title: '请选择', height: 400, confirmText: '确定', cancelText: '取消', value: 1 } }, methods: { onChange(index) { console.log(index) } } } </script> ``` 在上面的例子中,设置了Picker的title为“请选择”,高度为400,确定按钮文本为“确定”,取消按钮文本为“取消”,默认选中的选项为第二个(索引为1)。 以上就是使用uView的Picker组件的基本步骤和注意事项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值