位置: IT常识 - 正文

微信小程序自定义组件(超详细)(微信小程序自定义tabbar)

编辑:rootadmin
微信小程序自定义组件(超详细)

推荐整理分享微信小程序自定义组件(超详细)(微信小程序自定义tabbar),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序自定义轮播图小点,微信小程序自定义轮播图小点,微信小程序自定义头部导航栏,微信小程序自定义相机,微信小程序自定义相机,微信小程序自定义tabbar,微信小程序自定义组件找不到,微信小程序自定义tabbar,内容如对您有帮助,希望把文章链接给更多的朋友!

💌写在开头: 哈喽呀,亲爱的宝子们。 今天要介绍的是关于小程序自定义组件的相关内容。 主要分以下几个部分:组件的创建,组件的结构,组件的引用,组件样式,组件的生命周期等。

文章目录1.1 如何创建自定义组件1.2 自定义组件的使用(局部引入)1.3 自定义组件的引用方式1.4 自定义组件的样式(样式的隔离)1.5自定义组件的插槽1.6 自定义组件的生命周期1.7如何写自定义导航栏1.1 如何创建自定义组件

(1)在项目根目录中,鼠标右键创建 components 文件夹 (2)右击components文件夹,创建item文件夹 (3)右击item文件夹,点击新建Component,输入item (3)回车,自动生成四个小程序文件js json wxml wxss

微信小程序自定义组件(超详细)(微信小程序自定义tabbar)

注意:这里和vue有点类似,但是需要特别注意是新建Components,而不是新建page。为了保证目录结构的清晰,建议把不同的组件,放在components目录下不同文件夹中,例如我上图的三个自定义组件item ,cell.nav

1.2 自定义组件的使用(局部引入)

在页面xxx.json UsingComponent中注册,是以键值对的形式,前面的键就是我们创建的组件标签名,后面是url路径 在页面wxml中使用组件<item></item>

1.3 自定义组件的引用方式

组件的引用方式分为两种:局部引用与全局引用 (1)局部引用:组件只能在当前被引用的页面内使用,即在页面的.json配置文件中引用组件;如上图所示。在页面的.json配置文件中引入组件,在页面的.wxml文件中使用组件。 (2)全局引用:组件可以在每个小程序页面中使用,即在app.json全局配置文件中引用的组件

1.4 自定义组件的样式(样式的隔离)样式的隔离styleIsolation (1)当值为isolated,则为开启样式隔离 (2)若为apply-shared,父影响子,即页面的样式可以影响到组件,但是组件不能影响组件外的样式。 (3)若为shared父子影响,为双向影响。 外部类externalClasses:[“cell-class”],<view class="cell cell-class">我是cell组件</view>页面中<cell cell-class="mycell"></cell><cell></cell>.mycell{ line-height: 120rpx !important; color:#F70;}1.5自定义组件的插槽默认插槽 父组件 <cell> <text>插槽内容</text> </cell> 子组件 <view><slot></slot></view>命名多插槽 父组件 <cell> <text slot="pre"> 🚒</text> <text slot="next">🥗</text> </cell> 子组件 options:{ multipleSlots:true} <view> <slot name="pre"></slot> <slot name="next"></slot> </view> 1.6 自定义组件的生命周期(1)组件的生命周期lifetimescreated创建此时还不能调用 setDataattached挂载detached 卸载(2)页面的生命周期 pageLifetimesshow显示hide后台运行resize尺寸变化1.7如何写自定义导航栏 (1)wx.getMenuButtonBoundingClientRect()胶囊的边界(2) wx.getSystemInfoSync();系统信息(状态栏的高度)(3)配置自定义状态栏

在页面json中写入"navigationStyle": "custom"{ "usingComponents": { "nav":"/components/nav/nav" }, "navigationStyle": "custom"}在组件的js里面设置即可

本文链接地址:https://www.jiuchutong.com/zhishi/297338.html 转载请保留说明!

上一篇:基于Java Web的随意购商城系统(开源项目)(基于javaweb是什么意思)

下一篇:echarts柱状图坐标轴的内容太长导致显示不全的两种解决办法(echarts柱状图坐标轴)

  • 苹果13怎么将涉及自己隐私的软件隐藏起来(苹果十三如何)

    苹果13怎么将涉及自己隐私的软件隐藏起来(苹果十三如何)

  • 苹果手机日历收件箱怎么删除(苹果手机日历收到什么邀请可以点拒绝吗)

    苹果手机日历收件箱怎么删除(苹果手机日历收到什么邀请可以点拒绝吗)

  • slm卡1应用是什么意思(slm卡应用程序在哪里)

    slm卡1应用是什么意思(slm卡应用程序在哪里)

  • 苹果6一闪一灭的不开机(苹果6一直闪)

    苹果6一闪一灭的不开机(苹果6一直闪)

  • 蚂蚁森林68g能量是什么(蚂蚁森林68g能量多少克)

    蚂蚁森林68g能量是什么(蚂蚁森林68g能量多少克)

  • 苹果x系统要不要更新(苹果x系统尽量不更新吗)

    苹果x系统要不要更新(苹果x系统尽量不更新吗)

  • pdf文档中的橡皮功能(pdf文件橡皮擦功能)

    pdf文档中的橡皮功能(pdf文件橡皮擦功能)

  • 微信视频抖动(微信视频抖动有竖线)

    微信视频抖动(微信视频抖动有竖线)

  • 京东货到付款退货钱退到哪里(京东货到付款退货现金)

    京东货到付款退货钱退到哪里(京东货到付款退货现金)

  • 笔记本电脑可以关机充电吗(笔记本电脑可以填报高考志愿吗)

    笔记本电脑可以关机充电吗(笔记本电脑可以填报高考志愿吗)

  • 荣耀10x是升降还是挖孔(荣耀10xmax升降摄像头吗)

    荣耀10x是升降还是挖孔(荣耀10xmax升降摄像头吗)

  • 华为出现hd是怎么关闭(华为出现hd是怎么回事儿)

    华为出现hd是怎么关闭(华为出现hd是怎么回事儿)

  • mqcr2lla是哪个营运商的(mqcr2lla是正版吗)

    mqcr2lla是哪个营运商的(mqcr2lla是正版吗)

  • 微信接收视频聊天没有提示音怎么办(微信接收视频聊天没有声音怎么回事)

    微信接收视频聊天没有提示音怎么办(微信接收视频聊天没有声音怎么回事)

  • 滴滴打车为什么要预付车费(滴滴打车为什么自动扣钱)

    滴滴打车为什么要预付车费(滴滴打车为什么自动扣钱)

  • 苹果手机怎么修图涂鸦(苹果手机怎么修图)

    苹果手机怎么修图涂鸦(苹果手机怎么修图)

  • ipadmini是什么时候出的(ipadmini是什么时候发布的)

    ipadmini是什么时候出的(ipadmini是什么时候发布的)

  • qq3个皇冠之后是什么(3个皇冠qq能卖多少钱)

    qq3个皇冠之后是什么(3个皇冠qq能卖多少钱)

  • u盘可以在手机上下载歌曲吗(u盘可以在手机上设置密码吗)

    u盘可以在手机上下载歌曲吗(u盘可以在手机上设置密码吗)

  • 怎么在电脑上下载手机软件(怎么在电脑上下载我的世界)

    怎么在电脑上下载手机软件(怎么在电脑上下载我的世界)

  • 荣耀20什么时候可以升级10.0(荣耀20什么时候停产的)

    荣耀20什么时候可以升级10.0(荣耀20什么时候停产的)

  • 文件数量超限无法保存怎么办(文件数量超过上限)

    文件数量超限无法保存怎么办(文件数量超过上限)

  • 华为畅享9是双卡双待吗(华为畅享9双系统怎么设置)

    华为畅享9是双卡双待吗(华为畅享9双系统怎么设置)

  • Win11如何在开机之后强制进入安全模式?(win11如何在开机的时候进入安全模式)

    Win11如何在开机之后强制进入安全模式?(win11如何在开机的时候进入安全模式)

  • 忘记Excel工作表密码怎么办(忘记excel工作表保护密码怎么办)

    忘记Excel工作表密码怎么办(忘记excel工作表保护密码怎么办)

  • 增值税专用发票有效期是多长时间
  • 企业的开办费
  • 调整以前年度递延收益确认收入账务处理
  • 居民个人根据各项所得的收入 公益捐赠
  • 餐厅的市场
  • 劳服企业可以安差额税上税吗?
  • 或有负债记入哪个科目?
  • 个人取得的稿酬收入应该如何计算
  • 2018企业所得税小微企业优惠政策
  • 银行和保险公司是什么关系
  • 小规模纳税人可以开9%专票吗
  • 企业股权设计咨询这个行业怎么样
  • 购买土地建房出售怎么做账
  • 提前支付一年费用怎么算
  • 建筑企业预缴企业所得税会计分录
  • 发放的工资比计提的多怎么办
  • 固定资产少计提了怎么办
  • 如何填写企业所得税
  • 企业无法取得发票,如何税前扣除
  • 小规模纳税人有销无进是什么意思
  • 应届生能参考注册公司吗
  • php array_splice
  • 承租人经营租赁会计分录
  • u盘写保护格式化
  • ccmexec.exe是什么程序
  • php加入图片代码
  • 房产企业预售收入怎么做账务处理
  • 摊销租赁费的会计分录
  • 遇到的问题及解决方法
  • 自产的产品对外捐赠
  • vue的路由实现
  • 劳务费开发票后还需要交个税吗
  • thinkphp i方法
  • 以前年度损益调整
  • chrome os安装到u盘
  • css中清除浮动
  • roi opencv
  • ftpd命令
  • 深究Python中的asyncio库-线程池
  • 个体户按季申报吗
  • phpcms插件
  • 火车头造型
  • 小规模纳税人的企业所得税怎么算
  • 购买商品或服务的人称为
  • 原材料账户该如何做账
  • 存货成本核算方法的多久变更
  • 减免增值税计入营业外收入影响利润
  • 天使投资
  • 包装就是包装物
  • 福利费的进项税怎么做账
  • 小规模纳税人征税起点
  • 会计科目长期待摊费用
  • 利润相关计算公式是什么
  • 应补税额是要交钱
  • 企业盘亏的设备会计分录
  • 设计服务的成本核算
  • Mysql inner join on的用法实例(必看)
  • centos 安装
  • windows字幕软件
  • windows升级10
  • linux系统安装软件教程
  • cocos2dx-3.1.1 win8+eclipse+android开发 初学者容易迷惑的两个问题
  • cocos2d教程
  • 完美解决win11间歇性掉线
  • vue异步加载第三方库
  • 批处理应用实例
  • python数据结构教程
  • javascript页面设计
  • nodejs怎么启动服务
  • 经常用到的图像格式有
  • jq绑定事件的方法有哪些
  • 陕西省国家税务局刘峰
  • 广东省电子学校
  • 卖废铁分录
  • 财政云操作视频
  • 信用社股金转让 办理要多少时间
  • 中国进口0号柴油价格
  • 国税局地点
  • 增值税税控开票软件怎么下载
  • 税控盘怎么变更
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设