陪诊小程序之uniapp(从入门到精通)
1.uniapp如何使用vue3编写页面
<template><view class="content"><navbar name="navbar组件"></navbar><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view><view class="">11111</view><button @click="handleClick">点我</button><text>总共购买的水果数量{{totalNum}}</text><my-component></my-component><aComponent></aComponent><navbar></navbar><view v-for="item in list" :key="item.name"><view>1111</view><text>{{item.name}}</text><text>{{item.num}}</text></view></view>
</template><script setup>import aComponent from '../../../project/component/component.vue';import{ref,reactive,computed} from 'vue'import{onLoad} from '@dcloudio/uni-app'const title=ref('Hello')const list=reactive([{name:'apple',num:1},{name:'orange',num:2},{name:'banana',num:3}])const handleClick=()=>{list.forEach(item=>{item.num++})}onLoad(()=>{console.log('onLode生命周期')})const totalNum=computed(()=>{return list.reduce((total,cur)=>total+cur.num,0)})
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>
引入组件的三种方式
全局引入
1.引入
import componentVue from './component/component.vue'
2.全局注册
export function createApp() {
const app = createSSRApp(App)
app.component('my-component',componentVue)
return {
app
}
}
3.页面中引入
<my-component></my-component>
局部引入
<script setup>
import aComponent from '../../../project/component/component.vue';
import{ref,reactive,computed} from 'vue'
import{onLoad} from '@dcloudio/uni-app'
const title=ref('Hello')
const list=reactive([
{name:'apple',num:1},
{name:'orange',num:2},
{name:'banana',num:3}
])
const handleClick=()=>{
list.forEach(item=>{
item.num++
})
}
onLoad(()=>{
console.log('onLode生命周期')
})
const totalNum=computed(()=>{
return list.reduce((total,cur)=>total+cur.num,0)
})
</script>
<aComponent></aComponent>
自动引入
新建文件夹然后新建组件
组件引入
<navbar></navbar>
2.uniapp组件通信props和$emit和插槽语法
props
组件
<template><view>navbar组件</view>
</template><script setup>
import { defineProps } from 'vue';
defineProps(['name','content'])</script><style></style>
组件引入数据
<navbar name="navbar组件" :content="data"></navbar>
父组件(页面)向子组件传值,如果没传就用默认值
<template><view>navbar组件<view>组件的name属性{{name}}</view><view>组件的content属性{{content}}</view></view>
</template><script setup>
import { defineProps } from 'vue';
// defineProps(['name','content'])
defineProps({
name:String, content:{type:String,default:()=>{return '默认值';}}
})</script><style></style>
$emit
navbar.vue
<template>
<view>
navbar组件
<view>组件的name属性{{name}}</view>
<view>组件的content属性{{content}}</view>
<button @click="handleChange">修改content</button>
</view>
</template><script setup>
import { defineProps,defineEmits } from 'vue';
// defineProps(['name','content'])
defineProps({
name:String,
content:{
type:String,
default:()=>{
return '默认值';
}
}
})
const emit=defineEmits(['changeData'])
const handleChange=()=>{
emit('changeData','修改后的数据')
}</script>
<style>
</style>
<navbar :name="navbar组件" :content="data" @changeData="changeData"></navbar>
插槽语法
<navbar :name="navbar组件" :content="data" @changeData="changeData">
<view>我是插槽的内容</view>
</navbar>
<template>
<view>组件</view>
<view>组件的name属性{{name}}</view>
<view>组件的content属性{{content}}</view>
<slot></slot>
<button @click="handleChange">修改content</button>
</template><script setup>
import { defineProps,defineEmits } from 'vue';
// defineProps(['name','content'])
defineProps({
name:String,
content:{
type:String,
default:()=>{
return '默认值';
}
}
})
const emit=defineEmits(['changeData'])
const handleChange=()=>{
emit('changeData','修改后的数据')
}</script>
<style>
</style>
3.系统参数获取和navBar组件样式动态设计
<template><view class="nav"><view :style="'height:'+status+'rpx;'+containerStyle"></view><view class="navbar" :style="'height:'+navHeight+'rpx;'+containerStyle"></view></view>
</template><script setup>import { ref,onBeforeMount,defineProps } from 'vue';const props=defineProps({background:{type:String,default:'rgba(255,255,255,1)'},color:{type:String,default:'rgba(0,0,0,1)'},fontSize:{type:String,default:32},icoWidth:{type:String,default:116},iconHeight:{type:String,default:38}})onBeforeMount(()=>{setNavSize()setStyle()})//状态栏高度const status=ref(0)//内容高度const navHeight=ref(0)//背景颜色const containerStyle=ref('')//字体样式const textStyle=ref('')//图标的样式const iconStyle=ref('')//计算状态栏高度const setNavSize=()=>{const {system,statusBarHeight}=uni.getSystemInfoSync()status.value=statusBarHeight*2// console.log(res)const isiOS=system.indexOf('iOS')>-1if(!isiOS){navHeight.value=96}else{navHeight.value=88}// console.log(res) }const setStyle=()=>{containerStyle.value=['background:'+props.background].join(";") textStyle.value=['color:'+props.color,'font-size'+props.fontSize+'rpx'].join(';')iconStyle.value=['width:'+props.icoWidth+'rpx','height:'+props.iconHeight+'rpx'].join(';')}</script><style>.nav{position: fixed;width: 100%;top: 0;left: 0;z-index: 2;}</style>
4.页面栈获取和navBar跳转逻辑实现
index.vue
<template><view class="content"><navbar titleText="首页"></navbar> <button style="margin-top: 130rpx;" @click="navigateTo">跳转</button></view>
</template><script setup>import aComponent from '../../../project/component/component.vue';import{ref,reactive,computed} from 'vue'import{onLoad} from '@dcloudio/uni-app'const data=ref("动态数组")const title=ref('Hello')const list=reactive([{name:'apple',num:1},{name:'orange',num:2},{name:'banana',num:3}])const handleClick=()=>{list.forEach(item=>{item.num++})}const changeData=(val)=>{data.value=val}onLoad(()=>{console.log('onLode生命周期')})const totalNum=computed(()=>{return list.reduce((total,cur)=>total+cur.num,0)})const navigateTo=()=>{console.log(1111)uni.navigateTo({url:'/pages/search/index'}) }</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}</style>
navbar.vue
<template><view class="nav"><view :style="'height:'+status+'rpx;'+containerStyle"></view><view class="navbar" :style="'height:'+navHeight+'rpx;'+containerStyle"><view class="back-icon" @click="backOrHome"><image v-if="pages>1" src="../../static/resource/navbar/ic_back.png" mode=""></image><image v-else src="../../static/resource/navbar/ic_home.png" mode=""></image></view><view class="nav-title" v-if="titleText"><view :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;'+textStyle">{{titleText}}</view> </view></view></view>
</template><script setup>import { ref,onBeforeMount,defineProps } from 'vue';const props=defineProps({background:{type:String,default:'rgba(255,255,255,1)'},color:{type:String,default:'rgba(0,0,0,1)'},fontSize:{type:String,default:32},icoWidth:{type:String,default:116},iconHeight:{type:String,default:38},titleText:{type:String,default:''}})onBeforeMount(()=>{setNavSize()setStyle()// const pages = getCurrentPages().length;// console.log('当前页面栈的长度:', pages);})//状态栏高度const status=ref(0)//内容高度const navHeight=ref(0)//背景颜色const containerStyle=ref('')//字体样式const textStyle=ref('')//图标的样式const iconStyle=ref('')//页面栈的数量const pages=ref(getCurrentPages().length)console.log(pages.value,'page')//计算状态栏高度const setNavSize=()=>{const {system,statusBarHeight}=uni.getSystemInfoSync()status.value=statusBarHeight*2// console.log(res)const isiOS=system.indexOf('iOS')>-1if(!isiOS){navHeight.value=96}else{navHeight.value=88}// console.log(res) }const setStyle=()=>{containerStyle.value=['background:'+props.background].join(";") textStyle.value=['color:'+props.color,'font-size'+props.fontSize+'rpx'].join(';')iconStyle.value=['width:'+props.icoWidth+'rpx','height:'+props.iconHeight+'rpx'].join(';')}const backOrHome=()=>{if(pages.value>1){uni.navigateBack();}else{uni.switchTab({url:'/pages/index/index'})}}</script><style>.nav{position: fixed;width: 100%;top: 0;left: 0;z-index: 2;}.back-icon{display: flex;align-items: center;width: 64rpx;height: 100%;margin-left:20rpx ;}.back-icon image{width: 64rpx;height: 64rpx; }.navbar{position:relative;}.nav-title{position: absolute;top: 0;left: 50%;transform: translate(-50%);}</style>
5.胶囊位置计算和首页navBar显示效果
相关文章:

陪诊小程序之uniapp(从入门到精通)
1.uniapp如何使用vue3编写页面 <template><view class"content"><navbar name"navbar组件"></navbar><image class"logo" src"/static/logo.png"></image><view class"text-area"&…...

深度学习(一)基础:神经网络、训练过程与激活函数(1/10)
深度学习基础:神经网络、训练过程与激活函数 引言: 深度学习作为机器学习的一个子领域,近年来在人工智能的发展中扮演了举足轻重的角色。它通过模仿人脑的神经网络结构,使得计算机能够从数据中学习复杂的模式和特征,…...

源代码加密技术的一大新方向!
在当今这个信息爆炸的时代,企业所面临的数据安全挑战日益严峻。传统的文档加密方法已经无法满足日益复杂的安全需求。幸运的是,SDC沙盒加密系统以其革命性的安全理念和先进技术,为企业提供了一个更可靠、更高效的数据保护方案。 传统加密方案…...

SVN——常见问题
基本操作 检出 提交 更新 显示日志 撤销本地修改 撤销已提交内容 恢复到指定版本 添加忽略 修改同一行 修改二进制文件...

JavaCV 图像灰度化处理
🧑 博主简介:历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编程,…...

基于Multisim三极管B放大系数放大倍数测量电路设计(含仿真和报告)
【全套资料.zip】三极管B放大系数放大倍数测量电路电路设计Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.用三个数码管显示B的大小,分别显示个位、十位和百位。 2.显示范围…...
Molmo模型实战
安装pip文件 conda install pytorch==2.3.1 torchvision==0.18.1 torchaudio==2.3.1 pytorch-cuda=11.8 -c pytorch -c nvidiapip install ...

免费开源的微信开发框架
近年来,随着人工智能技术的快速发展,聊天机器人在各个领域得到了广泛的应用。在社交媒体中,自动回复成为了一个流行的功能,让用户可以方便地与机器人进行互动。gewe框架,一个开源的微信聊天机器人框架,实现…...

波形的变化和信号的产生1+multisim仿真
目录 1.正弦波振荡电路 1.1RC正弦波振荡电路 1.1.1RC串并联选频网络 1.1.2RC桥式正弦波振荡电路 1.1.4LC正弦波振荡电路 1.1.3石英晶体正弦波振荡电路 2.电压比较器 2.1概述 2.1.1基本概念 2.2电压比较器的种类 2.2.1过零比较器 2.2.2一般单限比较器 2.2.3滞回比较…...
【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit(3)
1.问题描述: compatibleSdkVersion升级到5.0.0(12)之后,调用坐标系转换API:map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, { longitude: location.longitude, latitude:…...

电脑微信多开方法,保姆级教学,超简单!
文章目录 前言方法教学 前言 大家在日常生活中一般都会有多个微信号或QQ号,但大部分人只有一部手机和一台电脑,这就导致每次都需要来回切换不同的账号,非常麻烦;QQ还好,在电脑上可以登陆多个账号,但微信只能…...
【Mysql】-锁,行级锁
Mysql mysql中的行锁 在 MySQL 的 InnoDB 存储引擎中,行级锁通常是加在索引上的,而不是直接加在数据行上。这种机制是基于索引的锁定策略,具体来说: 主键索引:如果查询更新使用了主键进行查找,InnoDB 会直…...
手机功耗技术领域
手机功耗技术领域 器件 器件-电池 提升电池能量密度 提升正极电压、升级负极材料正极电压方面,目前行业还是以4.5V体系为主;4.53V体系预计24-25年落地;负极材料方面,石墨体系每年2%能量密度提升迭代; 掺硅方案目前…...

Golang | Leetcode Golang题解之第493题翻转对
题目: 题解: type fenwick struct {tree []int }func newFenwickTree(n int) fenwick {return fenwick{make([]int, n1)} }func (f fenwick) add(i int) {for ; i < len(f.tree); i i & -i {f.tree[i]} }func (f fenwick) sum(i int) (res int)…...
linux笔记(yum本地源仓库搭建)
一、准备工作 安装必要的软件包 在大多数 Linux 发行版中,Yum 已经默认安装。如果系统中没有安装,可以根据发行版的包管理器进行安装。 准备本地源文件 可以是光盘镜像(如果是从光盘安装系统),或者是已经下载好的系…...

K8S系列-Kubernetes网络
一、Kubernetes网络模型 Kubernetes网络模型设计的一个基础原则是:每个Pod都拥有一个独立的IP地址,并假定所有Pod都在一个可以直接连通的、扁平的网络空间中,不管它们是否运行在同一个Node(宿主机)中,都…...

Excel 对数据进行脱敏
身份证号脱敏:LEFT(A2,6)&REPT("*",6)&RIGHT(A2,6) 手机号脱敏:LEFT(B2,3)&REPT("*",5)&RIGHT(B2,3) 姓名脱敏:LEFT(C2,1)&REPT("*",1)&RIGHT(C2,1) 参考: excel匹配替换…...
OJ-1014田忌赛马
示例1: 输入 11 8 20 10 13 7 输出 1 示例2: 输入 11 12 20 10 13 7 输出 2 示例3: 输入 1 2 3 4 5 6 输出 6 解题思路: 问题的关键在于调整数组a的顺序,使得尽可能多的a[i] > b[i]。为了达到最优结果,我们可以采用贪心的策…...

Excel重新踩坑3:条件格式;基本公式运算符;公式中的单元格引用方式;公式菜单栏其他有用的功能说明;
0、前言:以下内容是学习excel公式的基础内容。 1、需求:将表格特定区域中数值大小大于等于30,小于等于80的单元格,颜色填充为红色,大于80的,颜色填充为黄色。 新建规则之后也可以通过该功能清除规则。 2、基…...
【AI知识点】FAISS如何提高检索效率?
【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】 FAISS(Facebook AI Similarity Search) 是一个高效的相似度搜索库,专门设计用于处理大规模的向量检索任务,尤其是在稠密向量的检索中表现出色。FAISS 能够显著提高检索效率…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...

Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...

简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...