uview
Uview一些
一 搜索 <template> <u-search placeholder="日照香炉生紫烟" :clearabled="true" actionText="new" @change="custom" v-model="keyword"></u-search> </template> <script ......
uniapp---使用uView
在用uniapp开发项目的时候，选择合适的UI组件，往往能够事半功倍，而 uView 就是 uniapp 生态专用的 UI 框架，但是该 UI 框架并没有内置，而需要单独引入安装： uview官网： https://uviewui.com/components/intro.html 安装步骤： 第一 ......
uview1 的u-tabs组件在微信小程序中会出现横向滚动条
uview1 的u-tabs组件在微信小程序中会出现横向滚动条，真机才会生效，微信开发者工具没问题包括官方示例也会 原因：未屏蔽微信小程序的滚动条 解决办法：uview-ui中uview-ui/components/u-tabs/u-tabs.vue文件把h5屏蔽滚动条的条件编译加上 || MP-W ......
【uview2.x/uview-plus3.x/uv-ui框架】修改主题颜色
前言：在使用uview-plus和uv-ui时发现文档有时候挺乱的，看的挺累，这不，最近折腾个自定义主题，发现和文档所说的压根不对，以下是文档： 1. 按照官方说法，一堆报错，这里就不列举了，接下来看看正规做法： 2. 找到对应的主题包，就是官方让你在uni.scss中引入的那个，复制一份到公共目录 ......
Uniapp导入uView组件
npm导入组件 npm install uview-ui@2.0.36 后面跟上自己的版本 或者 npm install uview-ui //检查 console.log(uni.$u.config.v);可以查看自己是否导入成功 【main.js】import uView from 'uview ......
uView1.0和2.0版本的差异性
uView2.0与uView1.x之间，有着非常大的差异，由于2.0是重构版，所以1.x不能直接升级到2.x版本。 2.0版本优化了一些组件的使用，对加强了form表单的校验。 提供了通用性的customStyle参数，可以方便设置一些基础样式等等 ......
uview2 无网络u-icon图标不显示问题
uview2 无网络u-icon图标不显示问题 1、使用https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf链接下载ttf文件2、到https://transfonter.org/网址转为base64， 3、将生成的文件解压，获得以下文件，打开st ......
uview：根据style某个样式，修改该class内的其他样式。
背景：小程序使用uview ui，根据设计需要将选中的日期颜色变成绿色，但是api并没有相关属性。样式穿透，也没有可以区分选中和不选中的class。唯一能找到不一样的就是font-weight属性，选中的是bold，未选中的是normal。因此可以使用 where 来定位到该标签，从而修改其样式。 ......
uni app 的ui插件uview里自带的一些正则表达式
uni app 的ui插件uview里自带的一些正则表达式 取自"uni_modules\uview-ui\libs\function\test.js" /** * 验证电子邮箱格式 */ function email(value) { return /^\w+((-\w+)|(\.\w+))*\@ ......
uView组件库适配微信小程序
1.打开官网 uView 官网 2.在HbuilderX中集成插件sass，并新建项目。 3.补充小程序id等信息后进行编译。 4.根据官网 下载-安装方式提示进行操作 5.在HbuilderX中的工具 → 插件安装 → 插件市场安装 将uView集成到你的小程序项目中去。（如果搜索不到可以直接点击 ......
使用uniapp+uView制作表单踩坑事件
一、问题描述 制作表单过程中使用了uniapp的日期选择组件uni-datetime-picker和uView的u-picker组件 在实际编写过程中模拟器和安卓机的真机调试上，显示没有任何问题 但是 在使用IOS设备进行调试过程中，出现了弹窗遮挡的情况 二、寻找解决办法 1、第一反应为组件不兼容I ......
uniapp项目引入uView-ui
通过npm下载 // 如果您的根目录没有package.json文件的话，请先执行如下命令： // npm init -y npm install uview-ui // 更新 // npm update uview-ui 配置步骤 1.引入uView主JS库 在项目根目录中的main.js中，引入 ......
uview 中的 `u-line-1`原理
uview 中的 u-line-1原理 // 超出行数，自动显示行尾省略号，最多5行 // 来自uView的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】 @for $i from 1 through 5 { .u-line-#{$i} { ......
2023-09-15 uview的form组件labelStyle属性如何使用
<u-form :labelStyle='lstyle'> computed: { lstyle() { return { fontWeight: 'bold' }; } }, 注意：我用的uview2.0而非1.0，1.0该属性为label-style。 ......
2023-08-28 关于uview组件u-number-box的一些错误使用示范 ==》尽量不要给change事件传递参数
此处记录我对u-number-box的错误使用： <u-number-box v-model="item.num" @change="onChangeNum(item,index)"></u-number-box> 业务：修改购物车数量，遍历数据data给u-number-box赋值，u-numbe ......
Uni-app -uview模板使用
1、 https://v1.uviewui.com/components/resource.html 脚手架空白工程 打开模板 导入 从本地目录导入 ......
记录使用uview的tabs组件初始化渲染下划线移位问题解决
问题描述：初始化渲染后 tabs的下划线没有居中对其，出现异位。 问题分析: 网上很多大佬分析过出现原因了 记录下解决的过程: 在各个论坛搜集到解决方案都暂时无效 有使用v-if重新渲染的 有给类赋值偏移值的 有强行转换px的 因为各种原因这些方法在自己身上没有奏效所以记录下自己解决方案 偏移问题会 ......
2023-07-25 uview1.0的u-number-box组件在渲染时会触发change，如何才能避免事件影响？==》设置判断条件并增加时间延迟
前言：购物车用到加减购物车数量的一个步进器组件，使用的是uview组件1.0版本的u-number-box。 该组件设置了一个@change事件，该事件会在页面渲染的时候触发一次，如果你在里面调用了接口，比如增加/减少购物车数量，那么每次一刷新购物车该事件就会被触发，从而导致不必要的报错。 解决方案 ......
Uview引入Echart(uni-ec-canvas)方法
1.下载引入uni-ec-canvas文件 2.代码引入 View Code 例子图片 睡眠图 睡眠周（柱状图） 心脏健康心率图 心脏健康静息心率图 静心心率月图 体重折线图 距离图 ......
2023-07-06 uview-ui组件u-checkbox设置label-disabled无效==》点击文本仍旧触发checkbox
解决方案：既然无效，那就给checkbox包裹的文本绑定一个点击事件，该点击事件使用.stop来阻止事件冒泡，这样点击文本就不会触发checkbox的change了，可以参考一下代码： <u-checkbox> <view @click.stop="stopBack"> </View> </u-ch ......
2023-06-25 uview组件Vtabs 垂直选项卡无法滑动位移
前言：uni项目中导入uview的vtabs插件来做分页，奈何导入demo后发现无法实现滑动页面来自动选中左侧菜单。 原因：大哥！请先看文档，文档里有写，设置chain为true即可左右联动！好吧，是我没留意。 解决方案：设置vtabs属性chain为true，官网示例代码： <template> ......
2023-06-25 Cannot find module 'uview-ui'
前言：把uview2.0版本通过hx导入插件方式引入项目中，运行，遂报错：Cannot find module 'uview-ui' ==》无法找到模块'uview-ui' 检查项目下载的包，'uview-ui' 已存在，并存放于uni_modules文件夹中，引入代码为： // main.js，注 ......
uview提示:设置rules,model必须设置
问题： setRules时，uview提示:设置rules,model必须设置 原因： <u-form ref="form1" v-model="model1">眼瞎把v-model当成:model，可能全网只有我遇到。 解决： <u-form ref="form1" :model="model1" ......
基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板
最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目，但都是基于vue2开发。随着vite.js破局出圈，越来越多的项目偏向于vue3开发，就想着uniapp搭配vite4.x构建项目效果会如何？经过一番尝试果然真香~ 版本信息 HBu ......
uniapp使用uview组件的indexList写选择城市
<template> <view class=""> <view class="top"> <view class="search-box mt10 flex alcenter"> <view class="search-input"><u-search :showAction="false" pl ......
uView 2.X 的 picker 组件实现省市区县联动选择功能
# uView 2.X 的 picker 组件实现省市区县联动选择功能 ```html 收货地址信息 地区 ``` ......
uniapp之自定义Collapse 折叠面板 （主要让uView的源码适配多端）
今天使用uView插件的时候发现Collapse 折叠面板有点问题，主要是小程序了不能自定义标题，图标等，没错又是小程序！每次都是小程序，咱就说一套代码适配多端真的很多坑，尤其是小程序。 好了不废话了，先证明一下官网的确指明小程序不可以自定义使用插槽。如图 官网Collapse 折叠面板 | uVi ......
uni-app图片剪切上传;uview2用使用uview1中的图片剪切上传组件，把原有代码抽取出来
1.其实是个组件页面，移过来就行了。 2.原有组件中，可视区域和截图结果区域的长宽是一样的，所以需要调整一下； 3.因为剪切图片，是在一个单独页面实现的.所以pages.json中需要加上剪切的页面路径; pages.json { "path": "components/u-avatar-cropp ......
关于uniapp表单验证（uview）的坑
uniapp 在验证表单 出现this.$refs.uForm.setRules(this.rules) Error in onReady hook: "TypeErr的错误。 在web h5在上，就会容易错误，语句比较严格。 出现this.$refs.uForm.setRules(this.rul ......
uniapp脚手架项目抖音小程序中使用了uView框架中的IndexList 索引列表组件报错uni.requireNativePlugin is not a function
解决办法 如果您是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置： // vue.config.js，如没有此文件则手动创建 module.exports = { transpileDependencies: ['uview-ui'] } ......