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

  • 房地产企业税率为5销售水泥怎么算
  • 美国报税用什么软件
  • 办公用品普通发票的会计分录
  • 年报零申报的103怎么填
  • 房租押金没退款怎么起诉
  • 短期投资有什么缺点
  • 哪些补贴可以不交个税
  • 境外企业国内签订合同如何缴纳印花税?
  • 压覆矿产赔偿标准法律依据
  • 企业征地补偿支出需要什么凭据做账?
  • 无法读取金税盘时间版本怎么解决
  • 广告设计公司需要哪些设备
  • 报税报错了怎么办?
  • 资产总计与负债和所有者权益总计不一致
  • 个体纳税申报核定销售额填不填
  • 单位买酒报销如何做账
  • 劳务报酬所得的收入额
  • 金融企业贷款利息收入确认
  • 退货入库流程图
  • 原材料明细账余额为零怎么写
  • 内插法计算内部收益率公式
  • win10网络带宽
  • php框架怎么写
  • linux中添加用户和组的操作
  • 借条无还款时间怎么办
  • php字符串函数有哪些
  • 公允价值变动损益借贷方向增减
  • 电脑显示语言栏在哪里
  • 港田路凤凰城
  • 期间费用转入本年利润
  • 房屋赠与双方办理流程
  • 目前超频最高几ghz
  • 圣胡安岛战争
  • 企业合并发生的审计费用,评估费用会计分录
  • 未认证用户是什么意思
  • 丑八怪 英文
  • php文件操作小结怎么写
  • 怎样退出快手粉丝团 已解决
  • 长期股权投资
  • ln s命令
  • 房地产停车场属于公共配套设施吗
  • 本月没有销项只有进项 还认证发票吗
  • 用工会经费给员工发工资
  • 报税金额和开票统计不一致
  • mysql日期和时间分开存的 索引
  • 减征增值税的会计科目
  • 运输费属于生产成本还是制造费用
  • 子公司没有收入,只有费用如何企业所得税汇算清缴
  • 资产的计税基础通俗理解
  • 个体户该怎么交公积金
  • 油费预付卡如何办理
  • 员工在工伤
  • 参加新冠疫情防控工作总结
  • 低值易耗品意思
  • 建筑公司挂靠单位的财务处理是?
  • 电子发票不小心删掉了怎么办
  • 营改增后建筑行业进项税能抵扣吗
  • 运输过程发生的合理损耗计入成本吗
  • sql语句示例
  • CentOS 7.2下MySQL的安装与相关配置
  • mysql不能识别中文怎么解决
  • vmware下ubuntu(linux)与主机文件共享设置的方法
  • centos进入
  • mac os x 10.9.5
  • 华硕电脑升级win11
  • win8分屏快捷键
  • windows7不显示移动硬盘
  • 用python做逻辑回归
  • Node.js中的construct
  • 为什么使用json传输数据
  • 手机端apk反编译工具_android反编译工具
  • Android java.lang.IllegalArgumentException: pointerIndex out of range
  • jquery给下拉框添加选项
  • 高速通行费发票查验
  • 出口退税外汇汇率如何确定
  • 地税局网站查询发票
  • 土地二次买卖
  • 银元面值有哪些种类
  • 怎么下载国家税务局网上办税
  • 如何进行税务筹划工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设