uni-app
文章平均质量分 54
uni-app
夏已微凉、
这个作者很懒,什么都没留下…
展开
-
uni-app 遍历对象{}的属性和值
一、代码 onLoad() { let idToNumber = { 1: 3, 2: 4, 3: 9 }; let ids = Object.keys(idToNumber); ids.forEach(function (value, key) { console.log("id:" + value, "number:" + idToNumber[value]); }) let fourNumber = idToNumber[4]原创 2022-04-13 21:37:25 · 4074 阅读 · 1 评论 -
uni-app中左侧tab选项卡的实现效果
一、效果图二、代码一、效果图二、代码<template> <view> <view class="choose-tab"> <view class="choose-item" v-for="(item,index) in list" :class="chooseTab == index ? 'active' : ''" :data-choose="index" @click="clickTab"> {{item.name}} .原创 2022-03-21 13:11:47 · 2376 阅读 · 5 评论 -
uni-app中tab选项卡的实现效果
一、效果图二、代码三、他山之石一、效果图二、代码<template> <view> <view class="choose-tab"> <view class="choose-tab-item" :class="chooseTab == 0 ? 'active' : ''" data-choose="0" @click="clickTab">选项1</view> <view class="choose-tab-it.原创 2022-03-21 10:15:23 · 2110 阅读 · 0 评论 -
uni-app 中通过 async + await + Promise 实现 request 请求同步化
一、前言二、基于 Promise 对 request 请求进行封装三、使用 async + await,使异步请求同步化四、注意五、他山之石一、前言在 uni-app 中 uni.request 默认是异步请求,那么如果我们想将其改为同步请求可以吗?显然是可以的!我们可以借助 Promise 结合 async + await 使请求同步化。具体步骤如下:二、基于 Promise 对 request 请求进行封装请参考之前的文章:uni-app 基于 Promise 的 request 请求封装.转载 2022-02-23 23:44:12 · 2502 阅读 · 0 评论 -
uni-app 基于 Promise 的 request 请求封装
一、前言二、创建http.js三、需要使用的页面中,导入和使用 http一、前言在使用 uni-app 开发前端的过程中,uni-app 官方已为我们提供了非常丰富的组件和 API,比如 uni.request 网络请求,如果我们直接在代码中使用会造成较多的冗余,因此一般都会进行封装。之前有介绍过 uni.request 的基础封装,今天介绍另一种封装方式:基于 promise 的封装方式。二、创建http.js在项目根路径下新建 commons 文件夹,并创建一个 http.js,内容如下.转载 2022-02-23 23:39:47 · 1520 阅读 · 2 评论 -
uni_app UView 2.0 Upload 上传 header 如何配置
一、使用文档地址二、加上 header 属性即可一、使用文档地址UView 2.0 Upload 上传二、加上 header 属性即可uploadFilePromise(url) { return new Promise((resolve, reject) => { //返回图片url // resolve('http://www.***.com/test.png');return; //模拟返回数据 let a = uni.uploadFile({ url.原创 2022-02-23 23:34:40 · 2417 阅读 · 3 评论 -
uniapp uView u-picker组件三级联动Demo
一、写在前面二、效果截图1、首页2、三、uView组件引入四、大概的一个流程五、method方法介绍1、backStudent2、clickStudent3、changeHandler4、confirmStudent六、项目路径一、写在前面花了好几个小时,呕心沥血 >_<,写了个Demo,仅给大家提供一个思路,有不足之处请谅解~用的是 uView组件这个Demo是以 年级 班级 学生,这三级为例。项目创建:Hbuilder创建,依次选择:文件 新建 项目 选择 默认模板二、效果.原创 2022-02-12 23:31:26 · 5067 阅读 · 0 评论 -
uni-app在h5端和app端的使用。/deep/ css兼容性问题如何解决?
一、说明二、解决三、原文一、说明只在h5端生效,在app运行这个穿透不了,怎么解决呀?在h5端是这样的,如下:在app端是这样的,如下:样式如下 /deep/ .uni-slider-handle-wrapper { height: 10upx!important; } /deep/ .uni-slider-thumb{ di.转载 2022-02-11 22:20:44 · 1823 阅读 · 0 评论 -
uni-app 更改默认组件样式
一、说明二、解决1、在class前面 加入deep2、在vue-cli3编译时,用 ::v-deep3、编辑前,编辑好 截图对比三、他山之石一、说明uView文档 Checkbox 复选框vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局横向排列不换行,如下增加样式 flex-wrap: wrap;,成功换行二、解决1、在class前面 加入deep如果你期待通.原创 2022-02-11 22:16:01 · 4285 阅读 · 0 评论 -
HBuilder发布H5,nginx部署
一、说明二、步骤1、manifest.json 基础配置2、manifest.json h5配置3、发行4、发行完毕5、nginx.conf 配置一、说明此功能需要先登录!DCloud开发者中心,没有账号的话去注册一个。二、步骤1、manifest.json 基础配置uni-app应用标识(AppID),不存在请点击 重新获取2、manifest.json h5配置配置 页面标题,运行的基础路径,端口 等3、发行依次选择:发行 -> 网站-PC Web或手机H5(.原创 2022-02-10 14:46:25 · 6114 阅读 · 1 评论 -
iconfont 字体图标的使用方法
step 1step 2step 3step 4step 5step 6step 1百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过;step 2找到图标管理->我的项目->然后新建项目:右边点击新建项目,用于保存自己常用的图标;step 3项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;我现在将第一个安卓图标加入我的项目,点击加入购物车step 4添加到购.转载 2022-02-01 20:42:24 · 120 阅读 · 0 评论 -
uni-app 变量赋值后被实时同步
一、场景二、部分代码三、解决方式(深度克隆,深度拷贝)法一:js序列化法二:ES6语法四、他山之石一、场景把登录的用户信息 userInfo,赋值给编辑页面的 infoDetail,v-mode 页面回显 infoDetail.username修改 infoDetail 的用户名, userInfo的 username 也被修改了二、部分代码<input class="input" type="text" v-model="infoDetail.username" placeholde.原创 2022-02-01 20:10:49 · 1402 阅读 · 0 评论