uView JS工具库

最新推荐文章于 2024-07-22 12:19:03 发布
最新推荐文章于 2024-07-22 12:19:03 发布
阅读量2.5k 收藏 2
点赞数 1
分类专栏： uView 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42232325/article/details/121396055
版权

节流防抖

节流

  • throttle(func, wait = 500, immediate = true)
    规定时间内，只触发一次，可以通过设置immediate来决定触发的时机在这个时间的开始，还是结束的时候执行。
    func 触发回调执行的函数
    wait 时间间隔，单位ms
    immediate 在开始还是结束处触发，比如设置wait为1000ms，如果在一秒内进行了5次操作，只触发一次，如果immediate为true，那么就会在第一次操作 触发回调，如果为false，就会在第5次操作触发回调。
<template>
    <view>
        <view class="throttle" @tap="$u.throttle(btnClick1, 500)">
            throttle1
        </view>
        <view class="throttle" @tap="btnClick2">
            throttle2
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        btnClick1() {
            console.log('btnClick1');
        },
        btnClick2() {
            this.$u.throttle(this.btnClick, 500);
        },
        btnClick() {
            console.log('btnClick');
        }
    }
};
</script>
<style scoped lang="less"></style>

防抖

  • debounce(func, wait = 500, immediate = false)
    在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效
    func 触发回调执行的函数
    wait 时间间隔，单位ms
    immediate 在开始还是结束处触发，如非特殊情况，一般默认为false即可
<template>
    <view>
        <view class="throttle" @tap="$u.debounce(btnClick1, 500)">
            throttle1
        </view>
        <view class="throttle" @tap="btnClick2">
            throttle2
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        btnClick1() {
            console.log('btnClick1');
        },
        btnClick2() {
            this.$u.debounce(this.btnClick, 500);
        },
        btnClick() {
            console.log('btnClick');
        }
    }
};
</script>
<style scoped lang="less"></style>

deepClone 对象深度克隆

场景：

我们平时可能会遇到需要通过console.log打印一个对象，至执行打印的时刻，此对象为空，后面的逻辑中对此对象进行了修改赋值，但是我们在控制台直接看到的打印结果 却是修改后的值，这让人匪夷所思，虽然我们可以通过console.log(JSON.parse(JSON.stringify(object)))的形式处理，但是需要写这长长的一串，难免让人心生抵触。

当我们将一个对象(变量A)赋值给另一个变量(变量B)时，修改变量B，因为对象引用的特性，导致A也同时被修改，所以有时候我们需要将A克隆给B，这样修改B的时候，就不会 导致A也被修改。

  • deepClone(object = {})
    object 需要被克隆的对象
        let a = {
            name: 'mary'
        };

        // 直接赋值，为对象引用，即修改b等于修改a，因为a和b为同一个值
        let b = a;

        b.name = 'juli';
        console.log(b); // 结果为 {name: 'juli'}
        console.log(a); // 结果为 {name: 'juli'}

        // 深度克隆
        let b = this.$u.deepClone(a);

        b.name = 'juli';
        console.log(b); // 结果为 {name: 'juli'}
        console.log(a); // 结果为 {name: 'mary'}

deepMerge 对象深度合并

在ES6中，我们可以很方便的使用Object.assign进行对象合并，但这只是浅层的合并，如果对象的属性为数组或者对象的时候，会导致属性内部的值丢失。

注意： 此处合并不同于Object.assign，因为Object.assign(a, b)会修改a的值为最终的结果(这往往不是我们所期望的)，但是deepMerge(a, b)并不会修改a的值。

  • deepMerge(target = {}, source = {})
    target 目标对象
    source 源对象
    Object.assign浅合并示例：

        let a = {
            info: {
                name: 'mary'
            }
        };

        let b = {
            info: {
                age: '22'
            }
        };

        // 使用Object.assign进行合并，注意此时a被修改了
        let c = Object.assign(a, b);
        console.log(a, b, c);
        /* a: {
            info: {
                age: '22';
            }
        }
        b: {
            info: {
                age: '22';
            }
        }
        c: {
            info: {
                age: '22';
            }
        } */

        let c = this.$u.deepMerge(a, b);
        console.log(c);
        /* a: {
            info: {
                name: 'mary';
            }
        }
        b: {
            info: {
                age: '22';
            }
        }
        c:{
            info: {
                name: 'mary',
                age: '22'
            }
        } */

时间格式化

time时间格式

  • 格式化时间
    timeFormat | date(timestamp, format = “yyyy-mm-dd”)
    注意：1.7.9之前的版本只能传入秒或毫秒时间戳，date和timeFormat为同功能不同名函数，无论用哪个方法名，都是一样的。

该函数必须传入第一个参数，第二个参数是可选的，函数返回一个格式化好的时间。

time 任何合法的时间格式、秒或毫秒的时间戳
format 时间格式，可选。默认为yyyy-mm-dd，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，格式可以自由搭配，如： yyyy:mm:dd，yyyy-mm-dd，yyyy年mm月dd日，yyyy年mm月dd日 hh时MM分ss秒，yyyy/mm/dd/，MM:ss等组合

console.log(this.$u.timeFormat(1581170184));
console.log(this.$u.timeFormat(1581170184, 'yyyy年mm月dd日'));

过滤器式写法
uView同时把timeFormat()注册到了全局过滤器中，方便您在模板中使用：

 <!-- 因为默认参数为yyyy-mm-dd，所以这里可以不用写时间格式 -->
  <view> {{ 1581170184 | date }}</view> // 2020-02-08
  <view> {{ 1581170184 | timeFormat('yyyy-mm') }}</view> //2020-02

多久以前

  • timeFrom(time, format = String | false)
    注意 1.7.9之前的版本只能传入秒或毫秒时间戳

该函数必须传入第一个参数，格式为任何合法的时间格式、秒或毫秒的时间戳，第二个参数是可选的，返回的值类似刚刚，25分钟前，3小时前，7天前的结果。 如果第二个参数是时间的格式，当前和传入时间戳相差大于一个月时，返回格式化好的时间；如果第二个参数为false，则不会返回格式化好的时间，而是诸如"xxx年前"的结果。

timestamp 时间戳
format <String / false> 时间格式，默认为yyyy-mm-dd，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，格式可以自由搭配，如： yyyy:mm:dd，yyyy-mm-dd，yyyy年mm月dd日，yyyy年mm月dd日 hh时MM分ss秒，yyyy/mm/dd/，MM:ss等组合。 如果时间戳距离此时的时间，大于一个月，则返回一个格式化好的时间，如果此参数为false，返回均为"多久之前"的结果。

//如果时间戳距离此时的时间，大于一个月，则返回一个格式化好的时间，如果此参数为false，返回均为"多久之前"的结果。
console.log(this.$u.timeFrom(1581170184, 'yyyy-mm')); //2020-02
console.log(this.$u.timeFrom(1581170184)); //2020-02-08
console.log(this.$u.timeFrom(1637206559588)); //2小时前

过滤式写法
uView同时把timeFrom()注册到了全局过滤器中，方便您在模板中使用：

<view> {{ 1581170184 | timeFrom }}</view> // 2020-02-08
<view> {{ 1637206559588 | timeFrom('yyyy-mm') }}</view> //2小时前

route 路由跳转

  • route(Object)
    此为一个路由跳转方法，内部是对uni多个路由跳转api的封装，更方便使用
    Object参数说明：
参数名类型默认值是否必填说明
typeStringnavigateTofalsenavigateTo或to对应uni.navigateTo，redirect或redirectTo对应uni.redirectTo，switchTab或tab对应uni.switchTab，reLaunch对应uni.reLaunch，navigateBack或back对应uni.navigateBack
urlString-falsetype为navigateTo，redirecTo，switchTab，reLaunch时为必填
deltaNumber1falsetype为navigateBack时用到，表示返回的页面数
paramsObject-false传递的对象形式的参数，如{name:‘lisa’,age:18}
animationTypeStringpop-infalse只在app生效，详见窗口动画
animationDurationNumber300false动画持续时间，单位ms
onLoad() {
    this.$u.route({
        url: 'pages/components/empty/index',
        params: {
            name: 'lisa',
            age: 18
        }
    });
},

简写
注：为了方便简写，可以直接传递一个url地址代替Object，它只能执行uni.navigateTo类型的地址，不支持跳转到Tabbar页面，如果有参数需要携带，以对象形式写到方法的第二个参数中。

onLoad() {
	//无参数
    this.$u.route('pages/components/empty/index');
    //有参数
    this.$u.route('pages/components/empty/index', {
        name: 'lisa',
        age: 18
    });
},

数组乱序

randomArray(array)
该函数可以打乱一维数组元素的顺序，这是随机过程

array 一维数组

<script>
export default {
    onLoad() {
        console.log(this.$u.randomArray([1, 2, 3, 4, 5])); //[1, 5, 2, 3, 4]
        console.log(this.$u.randomArray([1, 2, 3, 4, 5]));
    }
};
</script>

guid全局唯一标识符

  • guid(length = 32, firstU = true, radix = 62)
    该函数可以生产一个全局唯一、随机的guid，默认首字母为u，可以用于当做元素的id或者class名等需要唯一，随机字符串的地方，因为id或者class不能以数字开头。

length <Number | null> guid的长度，默认为32，如果取值null，则按rfc4122标准生成对应格式的随机数
firstU 首字母是否为"u"，如果首字母为数字情况下，不能用作元素的id或者class，默认为true
radix 生成的基数，默认为62，用于生成随机数字符串为"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"， 如果取2，那么返回的结果就是前两位0和1(可以理解为二进制)的随机结果，如果为7，返回的字符串就是0-7(理解为八进制)之间， 10为十进制，以此类推。

说明：这个方法三个参数都有默认的值，所以您调用的时候，可以无需传递任何参数也是可以的，并且建议您这样做。

<template>
    <view :class="$u.guid()" :id="elClass">guid</view>
</template>

<script>
export default {
    data() {
        return {
            elClass: uni.$u.guid(2, true, 7)
        };
    }
};
</script>

colorSwitch颜色转换

<script>
export default {
    onLoad() {
        /* RGB转十六进制Hex
        rgbToHex(rgb)
        该函数可以将一个RGB颜色值转换成一个Hex的十六进制颜色值
        rgb <String> RGB颜色值，如rgb(230, 231, 233) */
        console.log(this.$u.rgbToHex('rgb(13, 145, 20)')); //#0d9114

        /* 十六进制Hex转RGB
        hexToRgb(hex)
        该函数可以将一个Hex的十六进制颜色值转换成一个RGB颜色值
        
        hex <String> HEx颜色值，如#0afdce */
        console.log(this.$u.hexToRgb('#0d9114')); //rgb(13,145,20)

        /* 颜色渐变
        colorGradient(startColor, endColor, step)
        该函数实现两个颜色值之间等分取值，返回一个数组，元素为十六进制形式的颜色值，数组长度为step值。 例如：colorGradient('rgb(250, 250, 250)', 'rgb(252, 252, 252)', 3)，得到的结果为["#fafafa", "#fafafa", "#fbfbfb"]
        
        startColor <String> 开始颜色值，可以是HEX或者RGB颜色值，如#0afdce或者rgb(120, 130, 150)
        endColor <String> 结束颜色值，可以是HEX或者RGB颜色值，如#0afdce或者rgb(120, 130, 150)
        step <Number> 均分值，把开始值和结束值平均分成多少份 */
        console.log(this.$u.colorGradient('rgb(250,250,250)', 'rgb(252,252,252)', 3)); //['#fafafa', '#fbfbfb', '#fcfcfc']

        /* 颜色透明度
        colorToRgba(color, opacity = 0.3)
        该函数可以接受一个十六进制或者rgb格式的颜色值(不能接受命名式颜色格式，比如white)，返回此颜色的rgba格式值，如下：
        
        color <String> 颜色值，只能hex或者rgba格式
        opacity <Number> 不透明度值，取值为0-1之间 */
        console.log(this.$u.colorToRgba('#000000', 0.3));//rgba(0,0,0,0.3)
    }
};
</script>

color 颜色值

此功能为uView内部通过js提供的一些颜色值，可以用于通过js修改元素字体，背景颜色等一些场景，常用于uView的各个组件中。
这些颜色值，挂载在$u对象下的color数组中，关于这些颜色值的具体描述，详见Color 色彩
使用方法：如使用primary颜色值，方法为：$u.color[‘primary’]

说明：这些通过JS调用的颜色值，也是能通过CSS调用的，二者等价。详见Color 色彩

<script>
export default {
    onLoad() {
        /* 主题颜色
        该主题颜色值，一共有5个，分别是primary、error、success、info、warning */
        console.log(this.$u.color['primary']); //#3c9cff

        /* 文字颜色
        uView一共提供了四个颜色值，具体请见组件部分Color色彩
        分别有：mainColor、contentColor、tipsColor、lightColor、borderColor(边框颜色值) */
        console.log(this.$u.color['mainColor']); //#303133

        /* 背景颜色 2.x已废弃
        uView提供了一个浅灰的背景颜色值，该值为#f3f4f6 */
        console.log(uni.$u.color['bgColor']); //undefined
    }
};
</script>

queryParams 对象转URL参数

该方法，可以将一个对象形式参数转换成get传参所需参数形式，如把{name: ‘lisa’, age: 20}转换成?name=lisa&age=20

用途：可以用于uni.navigateTo接口传参等场景，无需自己手动拼接URL参数

queryParams(data, isPrefix = true, arrayFormat = ‘brackets’)

  • data 对象值，如{name: ‘lisa’, age: 20}
  • isPrefix 是否在返回的字符串前加上"?"，默认为true
  • arrayFormat 属性为数组的情况下的处理办法，默认为brackets，见后面说明
<script>
export default {
    data() {
        return {
            data: {
                name: 'lisa',
                age: 18,
                fruits: ['apple', 'banana', 'orange']
            }
        };
    },
    onLoad() {
        console.log(this.$u.queryParams(this.data)); //?name=lisa&age=18&fruits[]=apple&fruits[]=banana&fruits[]=orange
        /* arrayFormat参数说明
        如果您传入的data对象内部某些属性值为数组的情况下，您可能需要留意这个参数的配置：
        该参数可选值有4个：indices，brackets，repeat，comma，具体效果请见下方的演示说明 */
        console.log(this.$u.queryParams(this.data, true, 'indices'));//?name=lisa&age=18&fruits[0]=apple&fruits[1]=banana&fruits[2]=orange
        console.log(this.$u.queryParams(this.data, true, 'brackets'));//?name=lisa&age=18&fruits[]=apple&fruits[]=banana&fruits[]=orange
        console.log(this.$u.queryParams(this.data, true, 'repeat'));//?name=lisa&age=18&fruits=apple&fruits=banana&fruits=orange
        console.log(this.$u.queryParams(this.data, true, 'comma'));//?name=lisa&age=18&fruits=apple,banana,orange
    }
};
</script>

test 规则校验

uView内置了一些校验规则，如是否手机号，邮箱号，URL等
这些规则方法，挂载在 u . t e s t 下 面 ， 如 验 证 是 否 手 机 号 ： ‘ u.test下面，如验证是否手机号：` u.test下面，如验证是否手机号：‘u.test.mobile(‘13888889999’)`，如果验证通过，返回true，否则返回false。

是否验证码

code(value, len = 6)
校验是否验证码(要求为数字)，返回true或者false。

  • value 验证码字符串
  • len 验证码长度，默认为6
console.log(this.$u.test.code('4567', 4));

是否数组

array(array)
校验是否数组，返回true或者false。

  • array 数组
console.log(this.$u.test.array(this.arr), Array.isArray(this.arr), Object.prototype.toString.call(this.arr) === '[object Array]');//true true true

是否Json字符串
jsonString(json)
校验是否Json字符串，返回true或者false。

  • json Json字符串
    注意：请留意json字符串的要求：

  • 整体为一个字符串

  • 字符串对象内的属性需要用""双引号包含

 console.log(uni.$u.test.jsonString('{"a": 1}'));

是否对象
object(object)
校验是否对象，返回true或者false。

  • object 对象
console.log(uni.$u.test.object({a: 1}));

是否邮箱号
email(email)
校验是否邮箱号，返回true或者false。

  • email 字符串
console.log(uni.$u.test.email('123465798@gmail.com'));

是否手机号
mobile(mobile)
校验是否手机号，返回true或者false。

  • mobile 字符串
console.log(uni.$u.test.mobile('13845678900'));

是否URL
url(url)
校验是否URL链接，返回true或者false。

  • url 字符串
console.log(uni.$u.test.url('http://www.uviewui.com'));//true
console.log(uni.$u.test.url('www.uviewui.com'));//false

是否为空
这里指的“空”，包含如下几种情况：

  • 值为undefined(一种类型)，
  • 非字符串"undefined" 字符串长度为0，也即空字符串
  • 值为false(布尔类型)，非字符串"false"
  • 值为数值0(非字符串"0")，或者NaN
  • 值为null，空对象{}，或者长度为0的数组

isEmpty(value)
校验值是否为空，返回true或者false。
此方法等同于empty名称，但是为了更语义化，推荐用isEmpty名称。

  • value 字符串
console.log(uni.$u.test.isEmpty(false));

是否普通日期
验证一个字符串是否日期，返回true或者false，如下行为正确：

  • 2020-02-10、2020-02-10 08:32:10、2020/02/10 3:10、2020/02/10 03:10、2020/02-10 3:10
    如下为错误：
  • 2020年02月10日、2020-02-10 25:32
    总的来说，年月日之间可以用"/“或者”-“分隔(不能用中文分隔)，时分秒之间用”:"分隔，数值不能超出范围，如月份不能为13，则检验成功，否则失败。

date(date)

  • date 日期字符串
console.log(uni.$u.test.date('2020-02-10 08:32:10'));

是否十进制数值
整数，小数，负数，带千分位数(2,359.08)等可以检验通过，返回true或者false。

number(number)

  • number 数字
console.log(uni.$u.test.number('2020'));

是否整数
所有字符都在0-9之间，才校验通过，结果返回true或者false。

digits(number)

  • number 数字
console.log(uni.$u.test.digits('2020'));

是否身份证号
身份证号，包括尾数为"X"的类型，可以校验通过，结果返回true或者false。

idCard(idCard)

  • idCard 身份证号
console.log(uni.$u.test.idCard('110101199003070134'));

是否车牌号
可以校验旧车牌号和新能源类型车牌号，结果返回true或者false。

carNo(carNo)

  • carNo 车牌号
console.log(uni.$u.test.carNo('京A88888'));

是否金额
最多两位小数，可以带千分位，结果返回true或者false。

amount(amount)

  • amount 金额字符串
console.log(uni.$u.test.amount('3,233.08'));//true
console.log(uni.$u.test.amount('3,233.080'));//false

是否汉字
可以为单个汉字，或者汉字组成的字符串，结果返回true或者false。

chinese(zh)

  • zh 中文字符串
console.log(uni.$u.test.chinese('更上一层楼'));

是否字母
只能为"a-z"或者"A-Z"之间的字符，结果返回true或者false。

letter(en)

  • en 字母串
console.log(uni.$u.test.letter('uView'));

是否字母或者数字
只能是字母或者数字，结果返回true或者false。

enOrNum(str)

  • str 字母或者数字字符串
console.log(uni.$u.test.enOrNum('uView'));

是否包含某个值
字符串中是否包含某一个子字符串，区分大小写，结果返回true或者false。

contains(str, subStr)

  • str 字符串
  • subStr 子字符串
console.log(uni.$u.test.contains('uView', 'View'));

数值是否在某个范围内
如30在"29-35"这个范围内，不在"25-28"这个范围内，结果返回true或者false。

range(number, range)

  • number 数值
  • range 如"[25-35]"
console.log(uni.$u.test.range(35, [30, 34]));

字符串长度是否在某个范围内
如"abc"长度为3，范围在"2-5"这个区间，结果返回true或者false。

rangeLength(str, range)

  • str 数值
  • range 如"[25, 35]"
console.log(uni.$u.test.rangeLength('abc', [3, 10]));

random 随机数值

random(min, max)
该方法可以返回在"min"和"max"之间的数值，要求"min"和"max"都为数值，且"max"大于或等于"min"，否则返回0.

  • min 最小值，最小值可以等于该值
  • max 最大值，最大值可以等于该值
console.log(uni.$u.random(1, 3));

trim 去除空格

trim(str, pos)
该方法可以去除空格，分别可以去除所有空格，两端空格，左边空格，右边空格，默认为去除两端空格

  • str 字符串
  • pos 去除那些位置的空格，可选为：both-默认值，去除两端空格，left-去除左边空格，right-去除右边空格，all-去除包括中间和两端的所有空格
console.log(uni.$u.trim('abc    b ', 'all')); // 去除所有空格
console.log(uni.$u.trim(' abc '));	// 去除两端空格
可视化UniApp 2.0 引入 UView Plus 组件库
weixin_38344204的博客
10-08 1016
通过简单的点击操作，开发者可以将 UView Plus 组件轻松载入到设计器中，享受无的拖拽体验。UView Plus 是基于 Vue 3 的组件库，支持丰富的组件类型，用户可以在设计器中任意混搭，创造出独特的应用界面。
uView UI框架 v2.0.36.zip
03-27
uView UI框架是一款在前端开发领域广泛应用的开源组件库，专为Vue.js设计，旨在提供一套全面、精炼且高效的UI解决方案。uView UI框架的最新版本v2.0.36，进一步提升了其性能和易用性，成为了开发者们进行软件工具...
uni-app--》uView组件库：提升您的uni-app开发体验
ztK63LrD的博客
05-21 3044
uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序，其它小程序平台的兼容可能存在一些问题，后续会针对这方面持续优化。
uni-app导入uViewUI组件库
ws15168689087的博客
12-19 3504
uni-app导入uViewUI组件库 uViewUI官方文档 https://www.uviewui.com/components/intro.html 1.首先通过npm安装uViewUI和SCSS插件 //安装uViewUI npm install uview-ui // 安装node-sass npm i node-sass -D // 安装sass-loader npm i sass-loader -D 此时文件列表如下： 2.接着，在main.js中导入uView import uV
uniapp $u.throttle节流
sunshinedadaad的博客
03-18 872
if(nowtime - this.lasttime < 2000){ //如果两次点击事件间隔小于2秒，则不触发后面的接口。规定时间内，只触发一次，可以通过设置immediate来决定触发的时机在这个时间的开始，还是结束的时候执行。// 此处用法为在js中调用，需要写this.$u.throttle()// 此处用法为在js中调用，需要写this.$u.使用uview 防止触发多次接口建议使用防抖。或者用当前点击时间为判断条件。
uni-app 分不清的全局变量this, uni, $u, vm, uni.$u, this.$u
LlanyW的专栏
08-27 9647
项目引入了uview,并将uview所有模块指给uniapp全局变量uni。
函数的节流与防抖
温壁
06-20 1687
1、节流--定时器 window.onload = ()=>{ let div = document.getElementById("div"); div.onmousemove = throttle(move,2000); } function move(){ console.log(13546); } function throttle(fn,wait){ var timer = null; return function(){ var
uView1.0.zip
11-22
而uView UI框架，作为Vue生态中的重要组件库，更是为开发者提供了丰富的UI组件和便捷的工具，大大提升了开发效率。本文将详细介绍如何利用uView1.0.zip这个压缩包，快速搭建并运行一个基于Vue的项目。 首先，uView...
uView UI框架 v1.8.8.zip
03-27
uView UI框架是一款专为Vue.js设计的高性能、易用且高度可定制的UI组件库，其v1.8.8版本提供了更为完善的解决方案，助力开发者快速构建优雅的Web应用程序。在前端开发领域，选择一个合适的UI框架对于提升开发效率、...
uview内置类演示demo
02-06
UView UI框架是专为uni-app设计的一款高度封装的组件库，它提供了一系列丰富、美观且易用的组件，适用于开发跨平台的移动应用。本文将深入探讨UView内置类在实际项目中的应用，并通过"uniapp-demo-uview"这个压缩包...
JavaScript节流防抖
06-09
js节流防抖 $u.throttle(()=>{ // 节流 },1000) $u.debounce(()=>{ // 防抖 },3000)
this.$toast() 了解一下？
12-03
前言 在平时的开发过程中，我们总是先写好一个组件，然后在需要的页面中用 import 引入即可，但如果是下面这种类型的组件呢:backhand_index_pointing_down: 上面这种类型的浮层提示有一个很大的特点，就是使用频率特别高，几乎每个页面都会用到它，于是乎我们就要在每个页面中去引入该组件，并且在每个页面都得通过一个变量来控制它的显隐，这显然不是我们想要的:person_gesturing_NO:。。。那我们想要的是什么样呢:thinking_face:？用过一些 UI 框架的同学们应该知道有这样一种用法： this.$toast({ duration: 3000, content: '这是一条消息提示' }); 没错，就是这么简单的一句话就万事大吉了（就是用 js 调用组件而已啦:face_with_monocle:）。那
uniapp 封装时间选择器组件
lwx931449660的博客
01-06 4565
本来项目基于uView UI 2.0版本开发的，时间组件本来是基于 uView dateTimePicker 组件做的二次封装，但是dateTimePicker 组件没有选择秒的功能。 所以基于 uniapp 的 picker-view 组件封装，如下： HTML <u-popup :show="show" mode="bottom" :round="round"> <view class="time-content"> <view class="hea.
uniapp 小程序，当返回上级页面传参
h_DK888的博客
09-03 960
1.不是组件式的传参，当返回上级页面时 B页面 this.$u.route({ type:'navigateBack', delta:1, }) uni.$emit("updateBack",{flushR:1}); 返回到A页面 onShow() { uni.$on("updateBack", res => { if(res.flushR == 1){ this.getPhysicalCondition(); } }) }
uview-ui工具函数的使用
qq_27161847的博客
04-13 1603
uview-ui工具函数的使用
uView使用$u.route无法正常跳转问题
Moon Star
03-15 3228
在uView中，调用$u.route进行页面跳转时，遇到了无法正常跳转的问题
uView节流防抖遇见的问题！
yyc_two的博客
09-14 636
uView使用吐槽之---节流防抖！
uni-app中使用uView UI组件库
qq_43235503的博客
04-23 909
uni-app中使用uView UI组件库
uniapp+uView保存与删除搜索历史记录
最新发布
每一篇博客都是对自己技术的沉淀
07-22 864
this.oldWordList = oldWordPageList // 新数组。', // 清空历史记录弹框内容。showNoDataImg: false, // 是否显示无搜索列表图片。
利用UniApp和UView组件库实现省市区三级联动
2. **uView组件库**: uView是一个专门为uni-app打造的高质量UI框架，它提供了丰富的组件和实用的工具，以帮助开发者快速构建美观、响应式的界面。uView组件库提供了一套完整的解决方案，覆盖了常用的表单输入、导航...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值