微信原生小程序自定义封装组件(以导航navbar为例)
封装
topnav.js
const App = getApp();
Component({// 组件的属性列表properties: {pageName: String, //中间的titleshowNav: { //判断是否显示左上角的按钮 type: Boolean,value: true},showHome: { //判断是否显示左上角的home按钮type: Boolean,value: true},showLocation:{type: Boolean,value: false },showColor:String, //颜色showStore:String,showWhite:{type: Boolean,value: false },titlecolor:String,//titletitleleft:String,//title//中间是否是定位},// 组件的初始数据data: {// showNav: true, //判断是否显示左上角的home按钮// showHome: true, //判断是否显示左上角的按钮},lifetimes: {// 生命周期函数,可以为函数,或一个在methods段中定义的方法名attached: function() {this.setData({navHeight: App.globalData.navHeight, //导航栏高度navTop: App.globalData.navTop, //胶囊按钮与顶部的距离jnheight: App.globalData.jnheight, //胶囊高度jnwidth: App.globalData.jnwidth //胶囊宽度})}},// 组件的方法列表methods: {//回退navBack: function() {let pages = getCurrentPages();let prevpage = pages[pages.length - 2];prevpage.setData({isflag:true})wx.navigateBack()},//回主页navHome: function() {wx.reLaunch({url: '/pages/index/index'})},//跳转定位页面golocation:function(){wx.navigateTo({url: '/pages/switchcity/switchcity'})}}
})
topnav.json
{"component": true,"usingComponents": {}
}
topnav.wxml
<view class="navbar" style="height:{{navHeight}}px;background:{{showColor}};"><!-- 左上角 返回按钮 和 home按钮 wx:if="{{showNav}}" 是控制左上角按钮的显示隐藏,首页不显示 --><view class="navbar_left"style="top:{{navTop}}px;height:{{jnheight}}px;width:{{jnwidth}}px;background:{{showWhite?'rgba(0,0,0,0.2)':''}};"wx:if="{{showNav}}"><!-- 控制返回按钮的显示 --><view bindtap="navBack"><!-- <image src="../../images/back.png" mode="widthFix" style="width:40%"></image> --><i class="iconfont iconfanhui" style="color:{{showWhite?'#fff':''}};"></i></view><!-- home按钮 wx:if="{{showHome}}" 是控制左上角 home按钮的显示隐藏--><view class="nav_line" bindtap="navHome" wx:if="{{showHome}}"><!-- <image src="../../images/backhome.png" mode="widthFix" style="width:50%"></image> --><i class="iconfont iconshouye" style="color:{{showWhite?'#fff':''}};"></i></view></view><!-- 中间标题 --><!-- <view wx:if="{{showLocation}}" style="top:{{navTop}}px;" class="navbar_title"><view bindtap="golocation">{{pageName}}<i class="iconfont iconarrowtriangle_down_fill"></i></view></view> --><view class="navbar_title {{showWhite?'':''}}" style="top:{{navTop}}px;padding-left: {{titleleft}}px;color:{{titlecolor}}"><view>{{pageName}}</view></view><!-- white_title 白色 -->
</view>
topnav.wxss
@import "/static/css/icon.wxss";.navbar {width: 100%;overflow: hidden;top: 0;left: 0;flex-shrink: 0;position: fixed !important;z-index: 9999;background: white;
}.navbar_left {display: -webkit-flex;display: flex;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;position: absolute;left: 20rpx;z-index: 11;line-height: 1;border: 1rpx solid #f0f0f0;border-radius: 40rpx;overflow: hidden;background: rgba(255, 255, 255, 0.6);box-sizing: border-box;
}.navbar_left view {width: 50%;display: flex;align-items: center;justify-content: center;
}.nav_line {border-left: 1rpx solid #f0f0f0;
}.navbar_title {width: 100%;box-sizing: border-box;text-align: center;height: 64rpx;line-height: 64rpx;position: absolute;left: 0;z-index: 10;font-size: 32rpx;font-weight: bold;text-overflow: ellipsis;overflow: hidden;
}.white_title {color: #fff !important;
}.iconfont {font-size: 34rpx;font-weight: 600;
}.iconarrowtriangle_down_fill {font-size: 20rpx;margin-left: 6rpx;
}
icon.wxss
@font-face {font-family: 'iconfont'; /* Project id 2408657 */src: url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.woff2?t=1705321879152') format('woff2'),url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.woff?t=1705321879152') format('woff'),url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.ttf?t=1705321879152') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.iconxuanzhong1:before {content: "\e631";
}.iconweixuanzhong:before {content: "\e633";
}.iconcaigoufapiao:before {content: "\e6b7";
}.iconshangsheng1:before {content: "\e737";
}.iconkefu:before {content: "\e625";
}.iconFrame:before {content: "\e636";
}.iconxiajiantou:before {content: "\eb6d";
}.iconshangjiantou:before {content: "\eb6e";
}.iconshangxiaqiehuan:before {content: "\e9cd";
}.iconxiala2:before {content: "\e634";
}.iconwenduxiajiang:before {content: "\e622";
}.icondiandiandian:before {content: "\e6f5";
}.iconliuyan1:before {content: "\e748";
}.icondizhi:before {content: "\e63e";
}.iconyunshu:before {content: "\e637";
}.iconshang1:before {content: "\e64e";
}.iconxia1:before {content: "\e64f";
}.iconcha:before {content: "\e679";
}.icona-xuanzhong:before {content: "\e602";
}.iconbitian:before {content: "\e669";
}.iconzuobiaofill:before {content: "\e768";
}.icondianhua:before {content: "\e635";
}.iconzuobiao:before {content: "\e615";
}.iconshanchu:before {content: "\e601";
}.icon4Sdian:before {content: "\e740";
}.iconxiala1:before {content: "\e756";
}.iconzhankaishangxia:before {content: "\e7b2";
}.iconshang:before {content: "\e610";
}.iconxia:before {content: "\e61b";
}.iconxiala:before {content: "\e7b1";
}.iconxuanzhong:before {content: "\e60d";
}.iconarrowtriangle_down_fill:before {content: "\e620";
}.iconshangsheng:before {content: "\e609";
}.iconxiajiang:before {content: "\e738";
}.iconchacha:before {content: "\e62f";
}.iconright:before {content: "\eb1b";
}.iconfanhui1:before {content: "\e61e";
}.iconsousuo:before {content: "\e600";
}.iconfanhui:before {content: "\e63b";
}.iconshouye:before {content: "\e659";
}
使用
index.wxml
<topnav pageName="导航"></topnav>
index.json
{"usingComponents": {"topnav": "/component/topnav/topnav",},"navigationStyle":"custom","navigationBarTitleText": "text"
}
相关文章:
微信原生小程序自定义封装组件(以导航navbar为例)
封装 topnav.js const App getApp(); Component({// 组件的属性列表properties: {pageName: String, //中间的titleshowNav: { //判断是否显示左上角的按钮 type: Boolean,value: true},showHome: { //判断是否显示左上角的home按钮type: Boolean,value: true},showLocat…...
<OS 有关>Ubuntu 24 安装 openssh-server, tailscale+ssh 慢增加
更新日志: Created on 14Jan.2025 by Dave , added openssh-server, tailescape Updated on 15Jan.2025, added "tailescape - tailscape ssh" 前期准备: 1. 更新可用软件包的数据库 2. 升级系统中所有已安装的软件包到最新版本 3. 安装 cur…...
HQL(JPQL)和原生SQL实现查询自定义返回类
维修申请实例RepairApplyInstance: package com.byx.scaffold.common.entity.jpa;import com.byx.scaffold.common.entity.jpaEnum.RepairStatusConstant; import lombok.Data;import javax.persistence.Convert; import javax.persistence.Entity; import javax.persistence…...
微信小程序 实现拼图功能
微信小程序 实现拼图 效果示例功能描述代码示例 效果示例 微信小程序 碎片拼图 功能描述 在微信小程序中,实现一个简单的拼图小游戏。用户需要将四张碎片图片拖动到目标图片的正确位置,具体功能如下: 拖动功能: 用户可以通过手指…...
《C++11》并发库:简介与应用
在C11之前,C并没有提供原生的并发支持。开发者通常需要依赖于操作系统的API(如Windows的CreateThread或POSIX的pthread_create)或者第三方库(如Boost.Thread)来创建和管理线程。这些方式存在以下几个问题: …...
【RDMA学习笔记】1:RDMA(Remote Direct Memory Access)介绍
从帝国理工的PPT学习。 什么是RDMA Remote Direct Memory Access,也就是Remote的DMA,是一种硬件机制,能直接访问远端结点的内存,而不需要处理器介入。 其中: Remote:跨node进行数据传输Directÿ…...
Autodl转发端口,在本地机器上运行Autodl服务器中的ipynb文件
通过 SSH 隧道将远程端口转发到本地机器 输入服务器示例的SSH指令和密码,将远程的6006端口代理到本地 在服务器终端,激活conda虚拟环境 conda activate posecnnexport PYOPENGL_PLATFORMegljupyter notebook --no-browser --port6006 --allow-root从…...
【Linux】常见指令(一)
Linux常见指令 01.whoami02.pwd03.ls04.mkdir05.cd 本文LInux环境为,使用XShell远程登陆到Linux。 具体如何环境搭建,大家可以查看其他博客。 01.whoami whoami 指令用来查看当前账户是谁。 如上图所示,使用whoami指令,查看到现在…...
AI学习之自然语言处理(NLP)
自然语言处理(Natural Language Processing,NLP)是计算机科学、人工智能和语言学领域的交叉学科,旨在让计算机能够理解、处理和生成人类语言。以下为你详细介绍: 自然语言处理的关键技术 词法分析:将文本…...
全面解析锁服务设计:内存锁、数据库锁与分布式锁的选择与实现
在构建分布式系统时,锁服务通常用于控制多个线程或进程对共享资源的访问。为了灵活适配不同的锁实现方式,我们可以设计一个基础的锁服务接口,然后根据需求提供不同的实现。例如,内存锁、数据库锁和分布式锁。 1. 锁服务基础接口设…...
jenkins-系统配置概述
一. 引文: Jenkins除了强大的功能插件实现的持续交付集成外, 本身也是有一些比较重要的可配项。 接下来我们来看一看。 配置入口: 系统管理-->系统设置 二. 基础配置: 1.主目录(home directory): Jenkins所有的数据文件存放路径(可通过…...
《数据思维》之数据可视化_读书笔记
文章目录 系列文章目录前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 前言 数据之道,路漫漫其修远兮,吾将上下而求索。 一、数据可视化 最基础的数据可视化方法就是统计图。一个好的统计图应该满足四个标准:准确、有…...
kafka消费堆积问题探索
背景 我们的商城项目用PHP写的,原本写日志方案用的是PHP的方案,但是,这个方案导致资源消耗一直降不下来,使用了20个CPU。后面考虑使用通过kafka的方案写日志,商城中把产生的日志丢到kafka中,在以go写的项目…...
一文掌握Docker
目录 1.快速入门 1.1.部署MySQL 1.2.命令解读 2.Docker基础 2.1.常见命令 2.1.1.命令介绍 2.1.2.演示 2.1.3.命令别名 2.2.数据卷 2.2.1.什么是数据卷 2.2.2.数据卷命令 2.2.3.挂载本地目录或文件 2.3.镜像 2.3.1.镜像结构 2.3.2.Dockerfile构建镜像 2.3.3.构建…...
慧集通(DataLinkX)iPaaS集成平台-系统管理之UI库管理、流程模板
UI库管理 UI库管理分为平台级和自建两种,其中平台级就是慧集通平台自己内置的一些ui库所有客户均可调用,自建则是平台支持使用者自己根据规则自己新增对应的UI库。具体界面如下: 自建UI库新增界面: 注:平台级UI库不支…...
【学习笔记】Macbook管理多个不同的Python版本
在MacBook上管理不同项目的不同Python版本,可以使用多种方法。以下是一些常见的方法: 1. 使用 pyenv pyenv 是一个非常流行的工具,可以让你轻松安装和切换多个Python版本。以下是安装和使用 pyenv 的步骤: 安装 pyenv 安装依赖…...
前端如何设计一个回溯用户操作的方案
同一个项目,为什么我本地无法复现,只有客户的设备才复现? 如何获取用户的操作路径呢? 两种方案:埋点和rrweb 埋点就很简单了,将所有可能操作的节点都进行预埋数据;但埋点简单并不省心ÿ…...
WPF、控件模板(ControlTemplate)和数据模板(DataTemplate)
前言 在 WPF 中,控件种类丰富且功能非常完善。一个显著的优点是 WPF 提供了强大的自定义能力和灵活的用户界面表现,能够满足各种复杂的应用需求。其中,ControlTemplate 和 DataTemplate 是两个非常重要的概念,分别用于自定义控件…...
MAC上安装Octave
1. 当前最新版Octave是9.3版本,需要把mac os系统升级到14版本(本人之前的版本是10版本) https://wiki.octave.org/Octave_for_macOS octave的历史版本参考此文档:Octave for macOS (outdated) - Octavehttps://wiki.octave.org/Oc…...
RabbitMQ(三)
RabbitMQ中的各模式及其用法 工作队列模式一、生产者代码1、封装工具类2、编写代码3、发送消息效果 二、消费者代码1、编写代码2、运行效果 发布订阅模式一、生产者代码二、消费者代码1、消费者1号2、消费者2号 三、运行效果四、小结 路由模式一、生产者代码二、消费者代码1、消…...
一体机cell服务器更换内存步骤
一体机cell服务器更换内存步骤: #1、确认grdidisk状态 cellcli -e list griddisk attribute name,asmmodestatus,asmdeactivationoutcome #2、offline griddisk cellcli -e alter griddisk all inactive #3、确认全部offline后进行关机操作 shutdown -h now #4、开…...
年后找工作需要注意的事项
大家好!我是 [数擎 AI],一位热爱探索新技术的前端开发者,在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情,欢迎关注我的文章,我们一起成长、进步! 开发领域:前端开发 | A…...
【网络 MAC 学习专栏 -- 如何理解 PHY 的 Link Up】
请阅读【嵌入式开发学习必备专栏 Cache | MMU | AMBA BUS | CoreSight | Trace32 | CoreLink | ARM GCC | CSH】 文章目录 OverviewClause 22/Clause 45Clause 22Clause 45 PHY Link 状态的软件实现 转自: 开心果 Need Car 2022年10月20日 09:50 上海 Overview PHY…...
鸿蒙UI开发——文本级联选择器
1、概 述 ArkUI提供了一个文本选择器(showTextPickerDialog),可以方便的实现文本级联选择,例如:省->市->区,示意如下: 下面针对文本选择器做简单介绍。 2、接口介绍 定义文本滑动选择器…...
后盾人JS -- JS运算符与流程控制
嘻嘻 赋值运算符与算术运算符 没什么好说的,等号谁都会用 比较运算符注意事项 如果一个是字符一个是数字也是可以比较的() 是判断值和类型是否相等 <!DOCTYPE html> <html lang"en"><head><meta charset…...
Hive SQL必刷练习题:留存率问题
首次登录算作当天新增,第二天也登录了算作一日留存。可以理解为,在10月1号登陆了。在10月2号也登陆了,那这个人就可以算是在1号留存 今日留存率 (今日登录且明天也登录的用户数) / 今日登录的总用户数 * 100% 解决思…...
笔记本电脑 选购 回收 特权模式使用 指南
笔记本电脑 factor 无线网卡:有些笔记本无法检测到特定频段的信息,会导致连不上校园网 sudo iwlist wlp2s0 scan | grep Frequency > net.txt cat net.txt>表示用终端输出覆盖后续文件,>>表示添加到后续文件的末尾 一种更简…...
基于PyQt - 6的医疗多模态大模型医疗研究系统中的创新构建与应用(上 .文章部分)
一、引言 1.1 研究背景与意义 在当今数智化时代,医疗行业正经历着深刻的变革,对智能化、高效化的需求日益迫切。传统的医疗模式在面对海量的医疗数据、复杂的诊断流程以及个性化的治疗需求时,逐渐显露出局限性。随着人工智能技术的飞速发展,多模态大模型作为一种前沿技术…...
下载文件,浏览器阻止不安全下载
背景: 在项目开发中,遇到需要下载文件的情况,文件类型可能是图片、excell表、pdf、zip等文件类型,但浏览器会阻止不安全的下载链接。 效果展示: 下载文件的两种方式: 一、根据接口的相对url,拼…...
1.15学习
web ctfhub-网站源码 打开环境,查看源代码无任何作用,但是其提醒就在表面暗示我们用dirsearch进行目录扫描,登录kali的root端,利用终端输入dirsearch -u 网址的命令扫描该网址目录,扫描成功后获得信息,在…...
shell练习2
需求:判断192.168.1.0/24网络中,当前在线的ip有哪些,并编写脚本打印出来。 #!/bin/bashnmap -sn 192.168.1.0/24 | grep Nmap scan report for | awk {print $5} 注意:当运行 bash ip.sh 时出现 nmap: command not found 的错误…...
MySQL学习笔记5【SQL优化/视图/存储过程/触发器】
MySQL学习笔记 SQL优化 1. 插入数据优化 普通插入: 采用批量插入: 每次插入不建议超过1000条记录,这样可以减少事务开销,提高性能。示例: INSERT INTO tb_user (name, age) VALUES (Alice, 25), (Bob, 30), ...;手动提…...
C++单例模式的设计
单例模式(Singleton Pattern)是一种设计模式,用于确保一个类只有一个实例,并提供一个全局访问点来访问该实例。在C中,单例模式通常用于管理全局资源或共享状态。 以下是C中实现单例模式的几种常见方式: 懒…...
【Linux系统编程】—— 自动化构建工具Makefile指南
文章目录 背景基本使用推导过程适度扩展语法 背景 Makefile 是衡量开发者是否具备完成大型工程能力的一个重要标志。在一个工程中,源文件的数量可能极多,这些文件会按照类型、功能或模块分布在多个目录中。Makefile 通过定义一系列规则,指定…...
【SpringBoot应用篇】SpringBoot+MDC+自定义Filter操作traceId实现日志链路追踪
【SpringBoot应用篇】SpringBootMDC自定义Filter操作traceId实现日志链路追踪 解决的问题解决方案MDC具体逻辑ymllogback-spring.xmlTraceIdUtil操作工具类TraceIdFilter自定义过滤器GlobalExceptionHandler全局异常处理类TraceIdAspect切面UserController测试验证 多线程处理M…...
少一点If/Else - 状态模式(State Pattern)
状态模式(State Pattern) 状态模式(State Pattern)状态模式(State Pattern)概述状态模式(State Pattern)结构图状态模式(State Pattern)涉及的角色 talk is c…...
【SVN】版本发布快捷操作
摘要:因为每次发版都需要制作一份相同的文件夹,而大部分的包都不需要变更,但是文件又非常大,记录自己的操作经验。 首先在SVN Repository Browser 界面把上一次的版本复制一份,复制的时候重命名为新的版本号 右击要复…...
nacos环境搭建以及SpringCloudAlibaba脚手架启动环境映射开发程序
1:下载nacos 地址:https://github.com/alibaba/nacos/tags 2:选择server的zip包下载 3:启动mysql服务,新建数据库:nacos_yh 4:解压下载的nacos_server 进入conf目录 5:mysql运行sql脚本变得到下面的表 6&a…...
【笔记整理】记录参加骁龙AIPC开发者技术沙龙的笔记
AIoT 首先了解了一个概念叫AIoT,我的理解就是AI IoT 5G,通过AI的发展使得边缘计算、数据整合和处理变得快捷方便,不仅限于传统的云端数据处理,在边缘的IoT设备上也可以进行智能化打造,通过5G的通信能力扩展可以实现…...
Kotlin 协程基础十 —— 协作、互斥锁与共享变量
Kotlin 协程基础系列: Kotlin 协程基础一 —— 总体知识概述 Kotlin 协程基础二 —— 结构化并发(一) Kotlin 协程基础三 —— 结构化并发(二) Kotlin 协程基础四 —— CoroutineScope 与 CoroutineContext Kotlin 协程…...
DAMA CDGA 备考笔记(二)
1. 考点分布 2. 第二章 数据处理伦理知识点总结 伦理是建立在是非观念上的行为准则。伦理准则通常侧重于公平、尊重、责任、诚信、质量、可靠性、透明度和信任等方面。数据伦理是一项社会责任问题不是法律问题。 度量指标:培训员工人数、合规/不合规事件、企业高管…...
【Lua学习之旅】之单行/多行注释
Lua的注释 单行注释多行注释 单行注释 lua中的单行注释采用两个短横线"--" --这是lua单行注释多行注释 写法一: --[[ 这个lua的多行注释, 很多资料说多行注释不可以嵌套, 根据我的测试,这种写法的多行注释在lua54版…...
【线性代数】行列式的概念
d e t ( A ) ∑ i 1 , i 2 , ⋯ , i n ( − 1 ) σ ( i 1 , ⋯ , i n ) a 1 , i 1 a 2 , i 2 , ⋯ , a n , i n det(A) \sum_{i_1,i_2,\cdots,i_n } (-1)^{\sigma(i_1,\cdots,i_n)} a_{1,i_1}a_{2,i_2},\cdots, a_{n,i_n} det(A)i1,i2,⋯,in∑(−1)σ(i1,⋯,in)a1…...
react中hooks之useEffect 用法总结
1. 什么是函数的副作用(Side Effects) 副作用是指在组件渲染过程中,除了返回 JSX 之外的其他操作,例如: 数据获取(API 调用)订阅数据源手动修改 DOM设置定时器存储数据日志记录 纯函数是特定的…...
小型、中型无人机执照学习和考试区别详解
小型、中型无人机执照的学习和考试在多个方面存在区别。以下是对两者的详细对比: 一、定义与适用范围 1. 小型无人机: 通常指起飞重量在7kg至25kg之间的无人机。 适用于多种应用场景,包括商业飞行、航拍、农业植保等。 必须持有民航局无人…...
【Go】Go Gin框架初识(一)
1. 什么是Gin框架 Gin框架:是一个由 Golang 语言开发的 web 框架,能够极大提高开发 web 应用的效率! 1.1 什么是web框架 web框架体系图(前后端不分离)如下图所示: 从上图中我们可以发现一个Web框架最重要…...
计算机网络的五层协议
计算机网络的五层协议 计算机网络的五层协议模型包括物理层、数据链路层、网络层、传输层和应用层,每一层都有其特定的功能和相关的协议。1 物理层:负责传输原始的比特流,通过线路(有线或无线)将数据转换为…...
QT中,在子线程中更新UI,会出现哪些问题,如何避免这种情况发生。
在Qt中,直接从子线程更新UI(用户界面)通常会导致各种问题,主要是因为Qt的UI组件(如QWidget及其子类)并不是线程安全的。具体来说,可能会出现以下问题: 崩溃和未定义行为:…...
C++并发编程之多线程环境下使用无锁数据结构的重要准则
在多线程环境中使用无锁数据结构(Lock-Free Data Structures)能够显著提高程序的并发性能,因为它们避免了传统锁机制带来的竞争和阻塞问题。然而,无锁编程本身也带来了许多挑战,如内存管理、数据一致性和正确性等问题。…...
Vue篇-07
Vue UI组件库 一、移动端常用的UI组件库 1.1、Vant 1.2、Cube UI 1.3、Mint UI 二、PC端常用的UI组件库 2.1、Element UI Element - The worlds most popular Vue UI framework 安装: 按需引入: 135_尚硅谷Vue技术_element-ui按需引入_哔哩哔哩_b…...