位置: 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柱状图坐标轴)

  • 荣耀20青春版可以升级鸿蒙系统吗(荣耀20青春版可以用40w快充吗)

    荣耀20青春版可以升级鸿蒙系统吗(荣耀20青春版可以用40w快充吗)

  • 苹果xsmax如何分屏(苹果xsmax如何分辨是不是国行正品)

    苹果xsmax如何分屏(苹果xsmax如何分辨是不是国行正品)

  • 红米note8pro电池能用多久(红米note8pro电池多少钱)

    红米note8pro电池能用多久(红米note8pro电池多少钱)

  • 手机上的时间和天气显示没有了怎么办(手机上的时间和日期不对了怎么改)

    手机上的时间和天气显示没有了怎么办(手机上的时间和日期不对了怎么改)

  • 华为nova7自带膜吗(华为nova7pro手机自带膜)

    华为nova7自带膜吗(华为nova7pro手机自带膜)

  • 电脑显示屏右下角有一块白的(电脑显示屏右下角的图标没有了)

    电脑显示屏右下角有一块白的(电脑显示屏右下角的图标没有了)

  • 华为主屏幕找不到微信(华为手机找不到主菜单了)

    华为主屏幕找不到微信(华为手机找不到主菜单了)

  • 拼多多二维码扫一扫在哪里(拼多多二维码扫不出来)

    拼多多二维码扫一扫在哪里(拼多多二维码扫不出来)

  • oppoa5手机突然黑屏开不了机怎么办(oppoa57手机黑屏)

    oppoa5手机突然黑屏开不了机怎么办(oppoa57手机黑屏)

  • 删掉的照片在哪个里面可以找到(苹果删掉的照片在哪)

    删掉的照片在哪个里面可以找到(苹果删掉的照片在哪)

  • team viewer 远程控制安全吗(teamviewer远程控制电脑能听到声音吗)

    team viewer 远程控制安全吗(teamviewer远程控制电脑能听到声音吗)

  • 酷狗音乐是哪家公司旗下的(酷狗下载免费音乐)

    酷狗音乐是哪家公司旗下的(酷狗下载免费音乐)

  • 怎么传输大容量视频(如何传输50多g的东西)

    怎么传输大容量视频(如何传输50多g的东西)

  • ps怎么去杂色(ps 去杂色)

    ps怎么去杂色(ps 去杂色)

  • 微信群退不出来怎么回事(微信群退不出来是手机中毒了吗)

    微信群退不出来怎么回事(微信群退不出来是手机中毒了吗)

  • 小米4lte是小米4吗(小米4lte价格)

    小米4lte是小米4吗(小米4lte价格)

  • 抖音点亮了什么意思(抖音点亮次数每天都有吗)

    抖音点亮了什么意思(抖音点亮次数每天都有吗)

  • 苹果手机系统13.1.2如何查找朋友(苹果手机系统13.6.1新功能)

    苹果手机系统13.1.2如何查找朋友(苹果手机系统13.6.1新功能)

  • 怎样去掉故事锁屏(故事屏锁怎样取消)

    怎样去掉故事锁屏(故事屏锁怎样取消)

  • 华为畅享max上市时间(华为畅享max是什么型号)

    华为畅享max上市时间(华为畅享max是什么型号)

  • 骚扰电话怎么解除标记(总是被骚扰电话骚扰怎么办)

    骚扰电话怎么解除标记(总是被骚扰电话骚扰怎么办)

  • l298n电机驱动模块使用方法(l298n电机驱动模块原理)

    l298n电机驱动模块使用方法(l298n电机驱动模块原理)

  • win11系统黑屏怎么办?解决win11黑屏的方法步骤(win11进入黑屏)

    win11系统黑屏怎么办?解决win11黑屏的方法步骤(win11进入黑屏)

  • 最贵的安卓应用是什么(最贵的安卓应用软件)

    最贵的安卓应用是什么(最贵的安卓应用软件)

  • 圣托里尼岛鸟瞰图,希腊 (© Amazing Aerial Agency/Offset)(圣托里尼岛游玩攻略)

    圣托里尼岛鸟瞰图,希腊 (© Amazing Aerial Agency/Offset)(圣托里尼岛游玩攻略)

  • 买车库需要交税吗
  • 最新劳务报酬的个税计算方法?
  • 应收票据属于其他应收账款吗
  • 农民工工资专户管理暂行办法
  • 原材料暂估入库的账务处理有哪些
  • 企业审计费入什么科目
  • 利润表没有其他业务收入
  • 子公司固定资产移到母公司
  • 劳动法相关法规
  • 委托收款税务认可吗
  • 城镇土地使用税纳税义务发生时间
  • 业务宣传费超出部分以后年度怎样处理
  • 公司的钱怎么转出来
  • 银行本票通俗
  • 如何计算企业当年利润
  • 小规模纳税人转成一般纳税人条件
  • 基本户发工资要交社保吗
  • 纳税人备案信息包括
  • 预缴和实际应付的区别
  • 供应商退回货款有时间限制吗
  • 收到退回的投标保证金
  • 冲费用挂账怎么做账
  • 如何整理流水账目
  • 存出投资款现金流量表选什么
  • php面向对象是什么意思
  • 出口货物退税率为0,是否出口免税
  • php框架的作用
  • 非正常原因造成的损失计入什么科目
  • 与取得收入无关的其他支出
  • 库存现金被盗会怎么样
  • joomla组件
  • ajax的使用场景
  • 拉帕努伊国家公园
  • 深入理解php内核pdf
  • 市职工报销比例多少
  • yolov3输出是什么
  • php获取ua
  • Spring Boot 3.0 正式发布,王炸!!
  • 以土地使用权投资入股
  • 赡养老人专项附加扣除的标准
  • mysql select语句操作实例
  • 建筑公司劳务分包开票内容怎么写
  • 发票票种核定发票种类怎么选
  • 汽车运输企业交什么税
  • 结转以后年度抵免的境外所得税怎么进行会计处理
  • 电脑更换显示器需要重装驱动吗
  • 多计费用以前年度损益调整账务处理
  • 个人转到公司账上的钱能开发票吗
  • 小微企业免征增值税优惠政策
  • 小规模纳税人购进税控收款机
  • 饭店会计做账流程
  • MySql5.6使用validate password 插件加强密码强度的安装及使用方法
  • 登录ubuntu桌面
  • 用虚拟光驱安装系统教程
  • vpngui.exe是什么进程
  • win10预览版和正式版区别
  • win7下安装XP
  • win10装老版本
  • win10打开或关闭功能在哪里
  • win10系统怎么清理电脑垃圾
  • linux文件系统inode
  • rtvscn95.exe - rtvscn95是什么进程 有什么用
  • linux sed
  • 关于dns的说法错误的是
  • win10系统玩游戏闪退怎么解决
  • vuerouter嵌套路由
  • js函数嵌套函数的return
  • jQuery实现可以控制图片旋转角度效果(附demo源码下载)
  • cocos2d怎么用
  • python 网络爬虫库
  • javascript例题
  • android studio项目无法运行
  • 房产契税发票在哪里查询
  • 个体工商户税务年报网上怎么申报
  • 贵阳税务局领导
  • 用于赞助的消费品需要缴纳消费税吗
  • 苏州税务中心
  • 审批制改为备案制有什么区别
  • 企业收取承包费如何缴纳增值税
  • 如何查询公司是一般纳税人还是小规模纳税人
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设