uView 在 uni-app 中的使用

这篇具有很好参考价值的文章主要介绍了uView 在 uni-app 中的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、uView是什么?

提示:正文内容:

uView 官网: https://www.uviewui.com uView 是 uni-app 生态专用的 UI 框架

关于uView的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)同音,同时view组件是uni-app中 最基础,最重要的组件,故取名uView,表达源于uni-app和Vue之意,同时在此也对它们表示感谢。

1.uView 安装

uView 官网提供了两种安装方式: Hbuilder X 方式、NPM 方式

Hbuilder X 方式: 使用 uni-app 搭建的项目,NPM 方式: 使用 vue cli 搭建的项目,根据项目框架选择相应的方式安装即可

uView 依赖 SCSS,必须要安装此插件,否则无法正常运行

2.uView 在 uni-app 中的使用

使用 HBuilderX 导入插件
配置步骤

  1. 引入 uView 主 JS 库

在项目根目录中的 main.js,引入并使用 uView 的 JS 库,这两行要放到import Vue from 'vue'
代码如下(示例):文章来源地址https://www.toymoban.com/news/detail-615486.html

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
  1. 引入 uView 的全局 SCSS 主题文件
    在项目根目录中的 uni.scss,引入全局SCSS主题文件
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
  1. 引入 uView 基础样式
    在项目根目录中的 App.vue,注意,要在首行位置引入,并且给 style 标签添加 lang="scss" 属性
<style lang="scss">
    /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-ui/index.scss";
</style>

到了这里,关于uView 在 uni-app 中的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Uni-App】用 uView 组件库中的u-picker 实现地区的 省-市-区 三级联动&确认&回显

    组件的引入就不多赘述了 直接看使用方法 地址我是引入的json文件数据结构大概是这个样子 例1 例2 做个动态style,控制是否高亮地址 链接:https://pan.baidu.com/s/1_heSAGHJnTe-343fRmbOPA 提取码:hmky 如果失效了 ,可以联系我获取

    2024年02月14日
    浏览(49)
  • uni-app使用uView打开弹出层后输入框聚焦时placeholder错位问题

    这里就不放效果了,大概意思就是在使用uView的popus时,在底部弹出后,如果弹窗中的输入框会造成一瞬间的placeholder文字错位,这个问题的主要是因为uView安全区适配导致 uView相关文档 popus源码 它会自动判断在并且在IPhone X等机型的时候,给元素加上一个适当底部内边距,从

    2024年02月19日
    浏览(49)
  • 【uni-app项目如何引入 uView组件库】

    uView官方文档 第一步: 在公司创建完成uniapp项目后引入uView 第二步: 您如果是使用HBuilder X创建的uniapp项目,使用uView组件库的话需要在HBuilder X下载插件库 下载 uni_modules ,(如果这个看不懂可以看官方文档) (1) HBuilder X插件库中下载 uni_modules 现在是已经将 uView导入到项目中了

    2024年02月05日
    浏览(59)
  • uni-app uView自定义底部导航栏

    因项目需要自定义底部导航栏,我把它写在了组件里,基于uView2框架写的(vue2);   在components下创建tabbar.vue文件,代码如下:  app.vue (有没有大佬知道为什么这个样式加载app.vue里才生效)  pages.json配置 页面使用: ( mine.vue ) 注: current是底部导航栏的下标,你在tabb

    2024年02月14日
    浏览(84)
  • uni-app 中使用uview生成测试小程序后报错:pleaseSetTranspileDependencies is not defined

    这是一篇踩坑文,记录一个uni-app中的坑点。 在uni-app 中使用uview后在生成小程序后第一次编译时控制台报了这么一个错: 在检查了许久的原因后最后找到的解决办法是: 在文件 /common/vendor.js 中搜索并删除下面这句话 如上图。 删除掉之后重新编译一下项目就正常运行了。

    2024年02月12日
    浏览(72)
  • uni-app+uView实现点击查看大图片的效果

    参数说明

    2024年02月10日
    浏览(50)
  • 【uni-app】安装uView-ui组件步骤

    uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序,其它小程序平台的兼容可能存在一些问题,后

    2024年02月14日
    浏览(46)
  • uni-app 之 安装uView,安装scss/sass编译

    uni-app 之 安装uView,安装scss/sass编译 image.png image.png image.png 点击HBuilder X 顶部,工具,插件安装,安装新插件 image.png image.png 安装成功! 注意,一定要先登录才可以安装 image.png 1. 引入uView主JS库 在项目根目录中的 main.js 中,引入并使用uView的JS库,注意这两行要放在 import Vu

    2024年02月10日
    浏览(53)
  • uni-app项目使用uview-ui报错:Component is not found in path node-modules/uview-ui/components/xx/xx

    解决: 一、uview-ui如果是 npm 安装 需要在 pages.json 中添加 easycom 配置 二、配置了以上还报错的话可能是 tempalte 样式最外层没用标签包括着(只允许有一层 用 view/view 包裹最外层

    2024年02月11日
    浏览(70)
  • 【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题

    出现的问题: 使用uview组件u-input框密码绑定时会出现右侧密码显隐图标不显示的问题 思路: 1.看了下uview源码,发现这有一段注释,我们需要把源码修改一下,问题出在这里    这行代码修改为  :password=\\\"password || type === \\\'password\\\' || false\\\" 2.其次发现uview源码里面并没有密码显隐

    2024年02月13日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包