当前位置: 首页 > news >正文

知识大杂烩(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 属性是一个回调函数,当切换成功时执行。在这个示例中,它的操作是重新加载当前页面,以确保在返回到当前页面时数据得到更新。

非常感谢观看

相关文章:

知识大杂烩(uniapp)

首先声明&#xff1a;不敢保证都管用&#xff0c;这是我自己实践得来的。 box-shadow: 这段 CSS 样式代码用于创建一个阴影效果&#xff0c;它是通过 box-shadow 属性来实现的。让我解释一下这段代码的含义&#xff1a; - box-shadow: 这是 CSS 的属性&#xff0c;用于添加阴影…...

Jmeter压测监控体系搭建Docker+Influxdb+Grafana

章节目录&#xff1a; 一、背景介绍1.1 概述1.2 拓扑图 二、云服务器设置三、Docker3.1 概述3.2 搭建流程3.3 安装验证3.4 配置docker镜像加速3.5 取消sudo运行(可选操作) 四、InfluxDB4.1 镜像拉取4.2 运行数据库4.3 创建存储 jmeter 数据的库 五、Grafana5.1 镜像拉取5.2 关联…...

TDesign 点击高亮显示=》点击切换class类名

1. wx:for遍历数组 2. 在一行显示 2. 点击高亮...

容器编排学习(二)镜像制作和私有仓库介绍

一 Dockerfile 1 概述 commit的局限 很容易制作简单的镜像&#xff0c;但碰到复杂的情况就十分不方便例如碰到下面的情况需要设置默认的启动命令需要设置环境变量需要指定镜像开放某些特定的端口 Dockerfile就是解决这些问题的方法 Dockerfile是一种更强大的镜像制作方式…...

tcp记录

网络传输&#xff1a;大小端 Qt网络编程实现TCP通信 TCP/IP通讯与socket编程 Qt一步步搭建TcpServer1——封装QTcpServer&#xff0c;QTcpSocket qtcpserver官方文档 Python address already in use 服务器端的端口号和客户端的端口号没有关系 一般服务器是需要BIND指定端口号…...

IDEA中使用Java连接MySQL数据库的配置和使用方法

文章目录 IDE和必要配置数据库连接代码 IDE和必要配置 IDE&#xff1a;IntelliJ IDEA 2023.1 必要配置&#xff1a; 1、安装好JDK&#xff0c;并且配置环境变量 2、导入MYSQL数据库所需的驱动 如果没有导入&#xff0c;可以参考这篇文章IDEA中的MySQL数据库所需驱动包的下载和…...

android——服务JobService

JobService是Android L时候官方新增的组件&#xff0c;适用于需要特定条件才执行后台任务的场景。由系统统一管理和调度&#xff0c;在特定场景下使用JobService更加灵活和省心&#xff0c;相当于是Service的加强或者优化。 JobService是JobScheduler的回调&#xff0c;是安排的…...

一文讲清楚redis的线程池jedis

背景 在shigen实习的时候&#xff0c;遇到了日志系统的性能优化问题&#xff0c;当时的优化点就是&#xff1a;使用redis的线程池&#xff0c;实现并发状态下的性能优化。但是找了很多的技术方案&#xff0c;发现redis的线程池配置起来比较麻烦。正巧&#xff0c;这个周末shig…...

备战面试每日一题

1.如何理解this&#xff1f; this表示的是函数运行时自动生成的一个内部对象&#xff0c;只能在函数内部使用&#xff0c;总是指向调用它的对象。 this是在运行时进行绑定的&#xff0c;并不是在编写的时候绑定&#xff0c;它的上下文取决于函数调用时的各种条件。this的绑定…...

【嵌入式数据库之sqlite3】

目录 一.数据库基本概念&#xff08;理解&#xff09; 1.数据 2.数据库 二.常用的数据的数据库&#xff08;了解&#xff09; 1.大型数据库 2.中型数据库 3.小型数据库 三.基于嵌入式的数据库&#xff08;了解&#xff09; 四.SQLite基础&#xff08;了解&#xff09;…...

Android 9.0 pms中关于启动app时获取app的ActivityInfo信息相关源码分析

1.前言 在android9.0的系统rom定制化开发中,在对于app启动时,在进行系统中,通过Launcher调用pms来查询app的相关ActivityInfo的相关信息,然后调用 ams来启动activity,这篇来分析pms中获取app的ActivityInfo的相关信息的相关源码分析 2.pms中关于启动app时获取app的Activ…...

华为数通方向HCIP-DataCom H12-821题库(单选题:321-340)

第321题 BGP的Open报文是用于建立对等体连接的,以下哪一项不属于Open报文中携带的参数信息? A、发送者的Router ID B、AS号 C、BGP版本号 D、TCP端口号 答案:D 解析:以下是BGP的Open报文: 第322题 在建立BGP对等体的过程中,OpenSent状态表明BGP等待的Open报文 并对收…...

《TCP/IP网络编程》阅读笔记--基于TCP的服务器端/客户端

目录 1--TCP/IP协议栈 2--TCP服务器端默认函数调用顺序 3--TCP客户端的默认函数调用顺序 4--Linux实现迭代回声服务器端/客户端 5--Windows实现迭代回声服务器端/客户端 6--TCP原理 7--Windows实现计算器服务器端/客户端 1--TCP/IP协议栈 TCP/IP协议栈共分 4 层&#xf…...

【每日一题】43. 字符串相乘

43. 字符串相乘 - 力扣&#xff08;LeetCode&#xff09; 给定两个以字符串形式表示的非负整数 num1 和 num2&#xff0c;返回 num1 和 num2 的乘积&#xff0c;它们的乘积也表示为字符串形式。 注意&#xff1a;不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例…...

机器学习——K最近邻算法(KNN)

机器学习——K最近邻算法&#xff08;KNN&#xff09; 文章目录 前言一、原理二、距离度量方法2.1. 欧氏距离2.2. 曼哈顿距离2.3. 闵可夫斯基距离2.4. 余弦相似度2.5. 切比雪夫距离2.6. 马哈拉诺比斯距离2.7. 汉明距离 三、在MD编辑器中输入数学公式&#xff08;额外&#xff0…...

同步FIFO的verilog实现(1)——计数法

一、FIFO概述 1、FIFO的定义 FIFO是英文First-In-First-Out的缩写&#xff0c;是一种先入先出的数据缓冲器&#xff0c;与一般的存储器的区别在于没有地址线&#xff0c; 使用起来简单&#xff0c;缺点是只能顺序读写数据&#xff0c;其数据地址由内部读写指针自动加1完成&…...

python正则表达式笔记1

最近工作中经常用到正则表达式处理数据&#xff0c;慢慢发现了正则表达式的强大功能&#xff0c;尤其在数据处理工作中&#xff0c;记录下来分享给大家。 一、 正则表达式语法介绍 正则表达式&#xff08;或 RE&#xff09;指定了一组与之匹配的字符串&#xff1b;模块内的函…...

YOLO目标检测——口罩规范佩戴数据集+已标注xml和txt格式标签下载分享

实际项目应用&#xff1a;目标检测口罩佩戴检测数据集的应用场景涵盖了公共场所监控、疫情防控管理、安全管理与控制以及人员统计和分析等领域。这些应用场景可以帮助相关部门和机构更好地管理口罩佩戴情况&#xff0c;提高公共卫生和安全水平&#xff0c;保障人们的健康和安全…...

Android 13 - Media框架(9)- NuPlayer::Decoder

这一节我们将了解 NuPlayer::Decoder&#xff0c;学习如何将 MediaCodec wrap 成一个强大的 Decoder。这一节会提前讲到 MediaCodec 相关的内容&#xff0c;如果看不大懂可以先跳过此篇。原先觉得 Decoder 部分简单&#xff0c;越读越发现自己的无知&#xff0c;Android 源码真…...

23.09.5 《CLR via C#》 笔记5

第六章 类型和成员基础 类型可以定义0或多个以下成员&#xff1a;常量、字段、实例构造器、类型构造器、方法、操作符重载、转换操作符、属性、事件、类型类型的可见性分为public和internal(默认)C#中&#xff0c;成员的可访问性分为private、protected、internal、protected …...

laravel部署api项目遇到问题总结

laravel线上部署问题 一、Ubuntu远程Mysql 61“Connection refused”二、Ubuntu更新php8三、线上部署Permission denied3.1、部署完之后访问域名出现报错&#xff1a;3.2、The /bootstrap/cache directory must be present and writable. 四、图片访问404五、git部署线上文件 一…...

lintcode 1646 · 合法组合【字符串DFS, vip 中等 好题】

题目 https://www.lintcode.com/problem/1646 给一个单词s,和一个字符串集合str。这个单词每次去掉一个字母&#xff0c;直到剩下最后一个字母。求验证是否存在一种删除的顺序&#xff0c;这个顺序下所有的单词都在str中。例如单词是’abc’&#xff0c;字符串集合是{‘a’,’…...

【多线程】线程安全 问题

线程安全 问题 一. 线程不安全的典型例子二. 线程安全的概念三. 线程不安全的原因1. 线程调度的抢占式执行2. 修改共享数据3. 原子性4. 内存可见性5. 指令重排序 一. 线程不安全的典型例子 class ThreadDemo {static class Counter {public int count 0;void increase() {cou…...

【用unity实现100个游戏之11】复刻经典消消乐游戏

文章目录 前言开始项目开始一、方块网格生成二、方块交换三、添加交换的动画效果四、水平消除检测五、垂直消除检测六、完善删除功能七、效果优化&#xff08;移动方块后再进行消除检测&#xff09;八、方块下落十、方块填充十一、后续 源码参考完结 前言 欢迎来到经典消消乐游…...

若依cloud 修改包名等

一、项目的项目名。 先改pom 然后在重命名文件 1、 修改主pom.xml <artifactId>ruoyi-api</artifactId> 缓存 <artifactId>zxf-api</artifactId> <groupId>com.ruoyi</groupId> <groupId>com.zhixiaofeng</groupId> 2、…...

健康系统练习

健康系统 项目建构&#xff1a; 前后端分离&#xff0c;前端vue3&#xff0c;后端Java&#xff0c;springboot做跨域处理&#xff0c;前端将在vscode中 的tomcat下部署&#xff0c;后端将在ideal中集成的tomcat中部署 创建项目工程在ideal中直接选用springi…创建&#xff0c…...

网络协议从入门到底层原理学习(一)—— 简介及基本概念

文章目录 网络协议从入门到底层原理学习&#xff08;一&#xff09;—— 简介及基本概念一、简介1、网络协议的定义2、网络协议组成要素3、广泛的网络协议类型网络通信协议网络安全协议网络管理协议 4、网络协议模型对比图 二、基本概念1、网络互连模型2、计算机之间的通信基础…...

centos密码过期导致navicat无法通过SSH登录阿里云RDS问题

具体错误提示&#xff1a;2013 - Lost connection to server at "hand hake: reading initial communication packet, system error: 0 解决办法&#xff1a;更新SSH服务器密码...

对于pytorch和对应pytorch网站的探索

一、关于网站上面的那个教程: 适合PyTorch小白的官网教程&#xff1a;Learning PyTorch With Examples - 知乎 (zhihu.com) 这个链接也是一样的&#xff0c; 总的来说&#xff0c;里面讲了这么一件事: 如果没有pytorch的分装好的nn.module用来继承的话&#xff0c;需要设计…...

和AI聊天:动态规划

动态规划 动态规划&#xff08;Dynamic Programming&#xff0c;简称 DP&#xff09;是一种常用于优化问题的算法。它解决的问题通常具有重叠子问题和最优子结构性质&#xff0c;可以通过将问题分解成相互依赖的子问题来求解整个问题的最优解。 动态规划算法主要分为以下几个步…...