知识大杂烩(uniapp)

首先声明:不敢保证都管用,这是我自己实践得来的。

box-shadow:

这段 CSS 样式代码用于创建一个阴影效果,它是通过 `box-shadow` 属性来实现的。让我解释一下这段代码的含义:

- `box-shadow`: 这是 CSS 的属性,用于添加阴影效果到一个元素上。

- `0`: 这是阴影的水平偏移量,表示阴影水平方向上不偏移(即阴影在元素的下方)。

- `14rpx`: 这是阴影的垂直偏移量,表示阴影垂直方向上偏移了 14 个 rpx 单位。rpx 是一种相对长度单位,常用于适配不同屏幕分辨率的移动应用开发。

- `18rpx`: 这是阴影的模糊半径,表示阴影的边缘会模糊化,模糊半径为 18 个 rpx 单位。

- `rgba(0, 0, 0, 0.1)`: 这是阴影的颜色和透明度。`rgba` 表示颜色由红、绿、蓝三个通道组成,每个通道的取值范围是 0 到 255,而最后一个参数表示透明度,取值范围是 0(完全透明)到 1(完全不透明)。在这里,阴影的颜色是黑色(红、绿、蓝都为 0),透明度为 0.1,即略带半透明的黑色阴影。

所以,这段代码的效果是在元素的下方(水平不偏移,垂直下移 14rpx),添加了一个半透明的黑色阴影,阴影的边缘有轻微的模糊效果。您可以根据需要调整偏移量、模糊半径和颜色来定制阴影效果。

box-shadow: 0 14rpx 18rpx rgba(0, 0, 0, 0.1);

rpx适用于小程序,px适用于pc端

uniapp的搜索功能:

链接:http://t.csdn.cn/wdUPg

utc时间转换成为本地时间uniapp版

链接:http://t.csdn.cn/XZryS

uniapp登录(微信小程序目前还能用的版本)

view部分

<button class="checkboxstr" @click="wxlogin" open-type="chooseAvatar" @chooseavatar="wxlogin"><image style="width: 50rpx;height: 50rpx;margin-top: 10rpx;" src="https://pic.imgdb.cn/item/64f71ef9661c6c8e54b5cc40.png" mode=""></image><text style="margin-top: -10rpx;justify-content: center;display: flex;">微信授权登录</text> </button>

script部分

			// 登录wxlogin() {// console.log(e.detail.avatarUrl,'image');// if(e.detail.avatarUrl!=''){// 	this.sg = true// 	this.avatar=e.detail.avatarUrl// 	uni.setStorageSync("uming",e.detail.avatarUrl)// }// let that = this;this.tanchu_sheng=false;//先获取用户的信息uni.getUserInfo({desc: '登录的数据',success(ures) {console.log(ures, '返回的用户信息');//这个地方的用户信息无论登录成功失败都可以拿到,只是拿到用户的信息//在成功的回调中去使用微信登录uni.login({provider: 'weixin', //使用微信登录success(lres) {console.log(lres, '获取到的code--------1');//我们要根据上面获取的code码去作为请求参数发送给后端let params = {code: lres.code};console.log(lres.code,'查看code--------2');// 1uni.request({url: '登录接口',//这里用自己的地址获取method: 'POST',data: {code: lres.code},success: (res) => {console.log(res,'测试是否成功?');//获得token完成登录uni.setStorageSync('token', res.data.data.token)uni.setStorageSync('id', res.data.data.id)console.log(res,'登录测试');// 提示uni.showToast({title: `登陆成功`,icon: 'none',duration: 2000,success: () => {// console.log('轻提示显示成功');},fail: (error) => {// console.error('轻提示显示失败', error);}});}});// 2}});}});},

uniapp通过url跳转传参

在 PageA 中触发跳转,同时将参数附加到目标页面的 URL 中。

<template><view><!-- 触发跳转到 PageB --><button @click="goToPageB">跳转到 PageB</button></view>
</template><script>
export default {methods: {goToPageB() {// 使用 uni.navigateTo 方法跳转到 PageB,并传递参数uni.navigateTo({url: `/pages/PageB?param1=value1&param2=value2`,});},},
};
</script>

在 PageB 中获取 URL 参数并处理数据。

<template><view><!-- 在 PageB 中显示参数 --><text>参数1:{{ param1 }}</text><text>参数2:{{ param2 }}</text></view>
</template><script>
export default {data() {return {param1: '',param2: '',};},onLoad(options) {// 在页面加载时获取 URL 参数this.param1 = options.param1 || '';this.param2 = options.param2 || '';},
};
</script>

3元表达式

下方是我写的一个小案例

{{shuju_dangan.nickname == null ? '暂无数据' : shuju_dangan.nickname == undefined ? '暂无数据' : shuju_dangan.nickname}}
  1. 如果 shuju_dangan.nickname 的值为 null,则显示 '暂无数据'
  2. 否则,如果 shuju_dangan.nickname 的值为 undefined,同样显示 '暂无数据'
  3. 如果 shuju_dangan.nickname 的值既不是 null 也不是 undefined,则显示 shuju_dangan.nickname 的值。

下方是一个进行简咯日期判断的三元表达式

{{item.end_time <= '2023-08-30' ? '数值1' : '数值2'}}

uniapp图片上传

view部分

		<view class=""><view class="" style="padding: 30rpx;font-size: 30rpx;">上传图片</view><view class="" style="margin-left: 2.5%;display: flex;"><!-- 图片上传 --><image :src="shujus"  style="width:200rpx ;height: 200rpx;" mode=""></image><u-upload :fileList="fileList1"   width="200rpx" height="200rpx"  @afterRead="afterRead" @delete="deletePic" name="1" multiple:maxCount="10"></u-upload></view></view>

script部分

fileList1: [],imageUrl: '', // 用于展示选择的图片shujus:'',
			// 图片上传// 删除图片deletePic(event) {this[`fileList${event.name}`].splice(event.index, 1)},// 新增图片async afterRead(event) {// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式let lists = [].concat(event.file[0].url)uni.uploadFile({url: '接口', // 仅为示例,非真实的接口地址filePath: event.file[0].url,name: 'file',formData: {user: 'test'},success: (res) => {console.log(res.data);this.uploadImg = JSON.parse(res.data)console.log(this.uploadImg.url,123123);this.shujus = this.uploadImg.url;uni.showToast({title: `图片上传成功`,icon: 'none',duration: 2000,success: () => {},fail: (error) => {}})setTimeout(() => {resolve(res)}, 1000)}});return// let fileListLen = this[`fileList${event.name}`].length// lists.map((item) => {// 	this[`fileList${event.name}`].push({// 		...item,// 		status: 'uploading',// 		message: '上传中'// 	})// })// for (let i = 0; i < lists.length; i++) {// 	const result = await this.uploadFilePromise(lists[i].url)// 	let item = this[`fileList${event.name}`][fileListLen]// 	this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {// 		status: 'success',// 		message: '',// 		url: result// 	}))// 	fileListLen++// }},uploadFilePromise(url) {console.log(url,'123123123');return// return new Promise((resolve, reject) => {// 	let a =// })},

setTimeout

setTimeout(function() {// 这里放置您希望在延迟之后执行的代码
}, 10); // 10 毫秒的延迟

setTimeout 函数用于创建一个定时器,该定时器将在 10 毫秒后执行函数内的代码块。

background: linear-gradient();

background: linear-gradient(to bottom, #FFFFFF, #EDFEF6);

这段 CSS 代码用于创建一个线性渐变背景,从顶部到底部,由白色渐变到 #EDFEF6 这个颜色。让我解释一下这个代码的含义:

  • background:这是 CSS 属性,用于设置元素的背景样式。

  • linear-gradient:这是背景属性的值,表示要创建一个线性渐变背景。

  • to bottom:这是线性渐变的方向,表示颜色从上到下渐变。您还可以使用其他方向,例如 to top(从下到上)、to left(从右到左)等。

  • #FFFFFF#EDFEF6:这是渐变的起始颜色和结束颜色。在这个例子中,渐变从白色 (#FFFFFF) 开始,到 #EDFEF6 结束。

这段代码的效果是将元素的背景设置为一个从顶部到底部的渐变,颜色逐渐从白色变为 #EDFEF6,这可以用来创建视觉上的渐变效果,使元素的背景看起来更丰富和吸引人。您可以根据需要调整颜色和渐变方向来满足您的设计要求。

split剪切自己想要的数据

下方只是一个简单的示例,在确保自己拿到数据的情况下循环数据中的某个自己想要修改的字段进行修改,切的时候可以是空格 逗号 也可以是某个字母

for (let i = 0; i < res.data.data.length; i++) {
res.data.data[i].end_time = res.data.data[i].end_time.split(' ')[0]
}

uniapp input

这样可以打印到自己的数值

<input type="text" v-model="inputValue" class="" style="width: 70%;margin-top: 40rpx;" @input="name" placeholder="请输入">inputValue: '',name(s) {console.log(s.detail.value);},

uniapp选项卡功能

使用uview组件来进行演示:uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)icon-default.png?t=N7T8https://www.uviewui.com/

<template><view><u-tabs:list="list4":activeIndex="activeIndex"@change="tabChange"lineWidth="30"lineColor="#f56c6c":activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}":inactiveStyle="{color: '#606266',transform: 'scale(1)'}"itemStyle="height: 60px;background-color:#ffffff;width:30%"></u-tabs></view>
</template><script>
export default {data() {return {list4: [{ label: '选项卡1', value: 'tab1' },{ label: '选项卡2', value: 'tab2' },{ label: '选项卡3', value: 'tab3' },],activeIndex: 0, // 当前激活的选项卡索引};},methods: {tabChange(index) {// 当选项卡切换时触发该方法,更新激活的选项卡索引this.activeIndex = index;},},
};
</script>

具体怎么使用还要看使用者

uniapp轻提示

						uni.showToast({title: `图片上传成功`,icon: 'none',duration: 2000,success: () => {},fail: (error) => {}})
  • uni.showToast 是 UniApp 中用于显示轻量级提示消息的方法。
  • title 属性用于设置提示消息的内容,这里设置为 '图片上传成功'
  • icon 属性用于设置提示消息的图标,这里设置为 'none' 表示不显示图标,如果需要显示图标,可以设置为 'success''loading' 等。
  • duration 属性用于设置提示消息的显示时间(以毫秒为单位),这里设置为 2000 表示消息将在 2 秒后自动消失。
  • successfail 属性是回调函数,在成功或失败时执行相应的操作。在这个示例中,它们为空函数,没有特定的操作。

这段代码的目的是在图片上传成功后,显示一个包含 '图片上传成功' 文字的提示消息,该消息不包含图标,并在 2 秒后自动消失。

uniapp从当前页面切换到指定标签页

不带有返回标记的标签

	uni.switchTab({url:'/pages/页面/页面',success: (res) => {let page = getCurrentPages().pop();if (page == undefined || page == null) return;page.onLoad();}})
  • uni.switchTab 是 UniApp 中用于切换标签页的方法。
  • url 属性用于指定要切换到的标签页的页面路径,这里设置为 '/pages/ji_fen_shang_cheng/ji_fen_shang_cheng',表示要切换到名为 'ji_fen_shang_cheng' 的标签页。
  • success 属性是一个回调函数,当切换成功时执行。在这个示例中,它的操作是重新加载当前页面,以确保在返回到当前页面时数据得到更新。

非常感谢观看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/71541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法笔记:平衡二叉树

1 介绍 平衡二叉树&#xff08;AVL树&#xff09;是一种特殊的二叉搜索树&#xff08;BST&#xff09;&#xff0c;它自动确保树保持低高度&#xff0c;以便实现各种基本操作&#xff08;如添加、删除和查找&#xff09;的高效性能。 ——>时间都维持在了O(logN)它是一棵空…

百度百科词条怎么更新?怎么能顺利更新百科词条?

企业和个人百度百科词条的更新对于他们来说都具有重要的意义&#xff0c;具体如下&#xff1a; 对企业来说&#xff1a; 塑造品牌形象&#xff1a;百度百科是一个常被用户信任并参考的知识平台&#xff0c;通过更新企业词条可以提供准确、全面的企业信息&#xff0c;帮助企业塑…

算法专题:前缀和

文章目录 Acwing&#xff1a;前缀和示例2845.统计趣味子数组的数目思路容易理解的写法&#xff1a;前缀和两层循环存在问题&#xff1a;超时 优化写法&#xff1a;两数之和思路&#xff0c;转换为哈希表 前缀和&#xff0c;就是求数组中某一段的所有元素的和。 求子数组中某一…

Unity3D 连接 SQLite 作为数据库基础功能【详细图文教程】

一、简单介绍一下SQLite的优势&#xff08;来自ChatGPT&#xff09; 轻量级: SQLite是一个嵌入式数据库引擎&#xff0c;它的库文件非常小巧&#xff0c;没有独立的服务器进程&#xff0c;适用于嵌入到其他应用程序中&#xff0c;对于轻量级的项目或移动应用程序非常适用。零配…

Golang RabbitMQ实现的延时队列

文章目录 前言一、延时队列与应用场景二、RabbitMQ如何实现延时队列实现延时队列的基本要素整体的实现原理如下 三、Go语言实战生产者消费者 前言 之前做秒杀商城项目的时候使用到了延时队列来解决订单超时问题&#xff0c;本博客就总结一下Golang是如何利用RabbitMQ实现的延时…

结构体对齐原理及在STM32中的设计原则和实现

在嵌入式系统开发中&#xff0c;结构体作为一种常见的数据组织方式&#xff0c;在内存中的布局方式对于程序性能和内存占用具有重要影响。本文将深入探讨单片机C语言中的结构体对齐原理、重要性以及不同的对齐方式&#xff0c;并通过示例演示结构体对齐如何影响内存占用、访问性…

【代码随想录】Day 50 动态规划11 (买卖股票Ⅲ、Ⅳ)

买卖股票Ⅲ https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iii/ 无语了。。。 写的很好就是怎么都过不了。。。 还是就用代码随想录的写法吧。。。 class Solution { public:int maxProfit(vector<int>& prices) {int n prices.size();vector&…

权限提升-Windows本地提权-AT+SC+PS命令-进程迁移-令牌窃取-getsystem+UAC

权限提升基础信息 1、具体有哪些权限需要我们了解掌握的&#xff1f; 后台权限&#xff0c;网站权限&#xff0c;数据库权限&#xff0c;接口权限&#xff0c;系统权限&#xff0c;域控权限等 2、以上常见权限获取方法简要归类说明&#xff1f; 后台权限&#xff1a;SQL注入,数…

DCMM数据能力成熟度评估模型--学习笔记(1)

DCMM数据能力成熟度评估模型--学习笔记 1、DCMM简介、结构组成和成熟度评估等级划分1.1 DCMM简介1.2 DCMM结构组成1.3 DCMM关键过程域1.3.1、数据战略&#xff08;指导方针&#xff09;1.3.2、数据治理 &#xff08;机制保障&#xff09;1.3.3、数据架构 (施工图纸)1.3.4、数据…

【Java】线程都有哪几种状态

文章目录 前言传统线程模型&#xff08;操作系统&#xff09;中线程状态Java线程中的状态线程的运行流程 前言 首先我们要知道&#xff0c;在传统&#xff08;操作系统&#xff09;的线程模型中线程被分为五种状态&#xff0c;在java线程中&#xff0c;线程被分为六种状态。 …

iOS 16.4更新指南:问题解答与新功能一览

我应该更新到iOS 16.4吗&#xff1f;这是许多iPhone用户在新更新可用时问自己的一个常见问题。最新的iOS版本提供了各种功能和改进&#xff0c;因此更新的诱惑力很大。 但是&#xff0c;在更新之前&#xff0c;你应该考虑几个因素&#xff0c;以确保安装过程顺利成功。这些因素…

云计算中的负载均衡技术,确保资源的平衡分配

文章目录 1. 硬件负载均衡器2. 软件负载均衡器3. DNS负载均衡4. 内容分发网络&#xff08;CDN&#xff09; &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&#xff1a;云计算 ✨文章内…

Android studio 实现生成二维码和扫描二维码

效果图 build.gradle(:app)添加依赖 dependencies {implementation com.google.zxing:core:3.3.3implementation com.journeyapps:zxing-android-embedded:3.6.0implementation com.google.zxing:javase:3.0.0 }Manifests.xml <uses-permission android:name"android…

线程中的join()、wait() 和 notify()详解及练习题

一、join() Thread 类提供了 join() 方法&#xff0c;用于等待当前线程所调用的其他线程执行完毕。 1、当一个线程调用另一个线程的 join() 方法时&#xff0c;它会被阻塞&#xff0c;直到被调用的线程执行完毕或达到指定的超时时间。 比如&#xff1a;当主线程main中调用了…

“搞事情”?OpenAl将于11月召开其首届开发者大会

摘要&#xff1a;OpenAI也要召开它的第一届开发者大会了。这次活动&#xff0c;或许标志着OpenAI向其下一阶段的商业开发迈出了关键一步。 昨天&#xff0c;OpenAI宣布将于11月6日举办其首次开发者大会。在这场名为“OpenAI DevDay”的活动中&#xff0c;OpenAI的技术人员将进行…

白鲸开源 DataOps 平台加速数据分析和大模型构建

作者 | 李晨 编辑 | Debra Chen 数据准备对于推动有效的自助式分析和数据科学实践至关重要。如今&#xff0c;企业大都知道基于数据的决策是成功数字化转型的关键&#xff0c;但要做出有效的决策&#xff0c;只有可信的数据才能提供帮助&#xff0c;随着数据量和数据源的多样…

安防监控/视频存储/视频汇聚平台EasyCVR如何接入智能分析网关V4?

TSINGSEE青犀AI边缘计算网关硬件 —— 智能分析网关目前有5个版本&#xff1a;V1、V2、V3、V4、V5&#xff0c;每个版本都能实现对监控视频的智能识别和分析&#xff0c;支持抓拍、记录、告警等&#xff0c;每个版本在算法模型及性能配置上略有不同。硬件可实现的AI检测包括&am…

nowcoder NC10 大数乘法

题目链接&#xff1a; https://www.nowcoder.com/practice/c4c488d4d40d4c4e9824c3650f7d5571?tpId196&tqId37177&rp1&ru/exam/company&qru/exam/company&sourceUrl%2Fexam%2Fcompany&difficultyundefined&judgeStatusundefined&tags&tit…

222. 完全二叉树的节点个数

题目链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 我的想法&#xff1a; 递归法 万金油--层次遍历法 当然上面两中都是笨方法&#xff0c;就算不是完全二叉树也能算&#xff0c;没有用到完全二叉树的特性。 我的代码&#xff1…

linux线程讲解

1.线程概述 一个进程在同一时刻只做一件事情&#xff0c;进程是程序执行的一个实例。 线程是操作系统能够进行运算调度的最小单位&#xff0c;一个进程中可以并发多个线程&#xff0c;每条线程并行执行不同的任务。 进程&#xff1a;资源分配的最小单位。线程&#xff0c;程…