知识大杂烩(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 秒后自动消失。
  • success 和 fail 属性是回调函数，在成功或失败时执行相应的操作。在这个示例中，它们为空函数，没有特定的操作。

这段代码的目的是在图片上传成功后，显示一个包含 '图片上传成功' 文字的提示消息，该消息不包含图标，并在 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.hqwc.cn/news/101619.html

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

相关文章

机器学习：Xgboost

机器学习：Xgboost

Xgboost XGBoost&#xff08;eXtreme Gradient Boosting&#xff09;是一种机器学习算法&#xff0c;是梯度提升决策树&#xff08;Gradient Boosting Decision Trees&#xff09;的一种优化实现。它是由陈天奇在2014年开发并推出的。XGBoost是一种强大而高效的算法&#xff0…
阅读更多...
Zebec Protocol 成非洲利比亚展会合作伙伴，并将向第三世界国家布局

Zebec Protocol 成非洲利比亚展会合作伙伴，并将向第三世界国家布局

在 9 月 6 日&#xff0c;The Digital Asset Summit ’23&#xff08;利比亚大会&#xff09;在尼日利亚首度阿布贾的 NAF 会议中心举办&#xff0c;该会议对 Web3 领域在非洲地区的发展进行了探索&#xff0c;旨在推动非洲地区区块链产业的进一步发展&#xff0c;据悉该会议室…
阅读更多...
docker快速安装-docker一键安装脚本

docker快速安装-docker一键安装脚本

1.下载/配置安装脚本 touch install-docker.sh #!/bin/bash #mail:ratelcloudqq.com #system:centos7 #integration: docker-latestclear echo "######################################################" echo "# Auto Install Docker …
阅读更多...
Kafka3.0.0版本——消费者（独立消费者消费某一个主题中某个分区数据案例__订阅分区）

Kafka3.0.0版本——消费者（独立消费者消费某一个主题中某个分区数据案例__订阅分区）

目录 一、独立消费者消费某一个主题中某个分区数据案例1.1、案例需求1.2、案例代码1.3、测试 一、独立消费者消费某一个主题中某个分区数据案例 1.1、案例需求 创建一个独立消费者&#xff0c;消费firstTopic主题 0 号分区的数据&#xff0c;所下图所示&#xff1a; 1.2、案…
阅读更多...
浅谈Spring

浅谈Spring

Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器&#xff08;框架&#xff09;。 一、什么是IOC&#xff1f; IoC Inversion of Control 翻译成中⽂是“控制反转”的意思&#xff0c;也就是说 Spring 是⼀个“控制反转”的容器。 1.1控制反转推导 这个控制反转怎…
阅读更多...
unity 控制Dropdown的Arrow箭头变化

unity 控制Dropdown的Arrow箭头变化

Dropdown打开下拉菜单会以“Template”为模板创建一个Dropdown List&#xff0c;在“Template”上添加一个脚本在Start()中执行下拉框打开时的操作&#xff0c;在OnDestroy()中执行下拉框收起时的操作即可。 效果代码如下用于控制Arrow旋转可以根据自己的想法进行修改&#xff…
阅读更多...
UE4 显示遮挡物体

UE4 显示遮挡物体

SceneDepth是你相机能够看见的物体的深度距离 CustomDepth是你相机包括看不见被遮挡的物体的深度距离 如果CustemDepth比SceneDepth的距离相等&#xff0c;那么就是没有被遮挡的物体&#xff0c;如果被遮挡那么就是CustemDepth比SceneDepth深度距离远&#xff0c;然后再做对应…
阅读更多...
滑动窗口实例7（串联所有单词的子串）

滑动窗口实例7（串联所有单词的子串）

题目&#xff1a; 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如&#xff0c;如果 words ["ab","cd","ef"]&#xff0c;…
阅读更多...
Cyber RT基础入门与实践_Hello Apollo

Cyber RT基础入门与实践_Hello Apollo

Hello Apollo 进入云实验环境模块的模块内包的 进入云实验环境 <1> 创建本节实验工程目录&#xff0c;创建完成后&#xff0c;工程目录如下所示&#xff1a; cyber_demo |-- cyber_01 |-- demo_main | |-- BUILD | |-- main.cc |–BUILD |–cyberfile.xml |–cyber_demo.…
阅读更多...
Vue3后台管理系统Element-plus_侧边栏制作_无限递归

Vue3后台管理系统Element-plus_侧边栏制作_无限递归

在home.view中添加代码 <template><div><div class"common-layout"><el-container><el-header class"common-header flex-float"><div class"flex"><img class"logo" src"../assets/logo…
阅读更多...
【CAD二次开发】重新加载acad.pgp快捷菜单文件

【CAD二次开发】重新加载acad.pgp快捷菜单文件

为了加快绘图速度&#xff0c;好多人会进行CAD快捷命令的修改&#xff0c;那怎么在不需要重启CAD的情况下自动更新&#xff1f; CAD修改acad.pgp,快捷命令后&#xff0c;自动更新。 方法一 命令行输入reinit&#xff0c;命令。 在弹出的窗口中&#xff0c;选择‘PGP文件’&…
阅读更多...
科普初步了解大模型

科普初步了解大模型

目录 一、大模型的简单认知 &#xff08;一&#xff09;官方定义 &#xff08;二&#xff09;聚焦到大语言模型 &#xff08;三&#xff09;大模型的应用举例 二、如何得到大模型 &#xff08;一&#xff09;整体的一般步骤 训练自己的模型 使用预训练模型 选择适当的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023