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

  • 如何打开airdrop(如何打开airdrops)

    如何打开airdrop(如何打开airdrops)

  • 支付宝怎么查看好友前几天的步数(支付宝怎么查看社保卡账号)

    支付宝怎么查看好友前几天的步数(支付宝怎么查看社保卡账号)

  • 华为nova5z可以用电信卡吗(华为nova5z可以用几年)

    华为nova5z可以用电信卡吗(华为nova5z可以用几年)

  • appleid无效或不受支持怎么办(appleid 无效)

    appleid无效或不受支持怎么办(appleid 无效)

  • 怎么关闭华为省电模式(怎么关闭华为省电功能)

    怎么关闭华为省电模式(怎么关闭华为省电功能)

  • 微信号只能是英文和数字吗(微信号只能是英文吗为什么)

    微信号只能是英文和数字吗(微信号只能是英文吗为什么)

  • 微信说什么会掉表情(微信说什么会掉表情包)

    微信说什么会掉表情(微信说什么会掉表情包)

  • 关机重启快捷键是什么(苹果笔记本怎么关机重启快捷键)

    关机重启快捷键是什么(苹果笔记本怎么关机重启快捷键)

  • 电脑自带锁屏壁纸在哪(电脑自带锁屏壁纸在哪个文件夹)

    电脑自带锁屏壁纸在哪(电脑自带锁屏壁纸在哪个文件夹)

  • 拼多多好友申请怎么撤回(拼多多好友申请已失效是什么意思)

    拼多多好友申请怎么撤回(拼多多好友申请已失效是什么意思)

  • 无线定位器电池能用多久(无线定位器电池一般能用多久)

    无线定位器电池能用多久(无线定位器电池一般能用多久)

  • 红外测温仪ems什么意思(红外测温仪ems什么牌子好)

    红外测温仪ems什么意思(红外测温仪ems什么牌子好)

  • 苹果11pro有指纹解锁吗(苹果11pro有指纹支付吗)

    苹果11pro有指纹解锁吗(苹果11pro有指纹支付吗)

  • 文件被锁定是什么情况(文件被锁定是什么原因)

    文件被锁定是什么情况(文件被锁定是什么原因)

  • 华为手机怎样黑屏后时间显示(华为手机怎样黑屏拍视频)

    华为手机怎样黑屏后时间显示(华为手机怎样黑屏拍视频)

  • 手机qq资料卡皮肤怎么换(手机qq资料卡皮肤有哪些免费的)

    手机qq资料卡皮肤怎么换(手机qq资料卡皮肤有哪些免费的)

  • 小米9pro无线反充怎么用(小米9无线反冲怎么打开)

    小米9pro无线反充怎么用(小米9无线反冲怎么打开)

  • 酷喵怎么退出登录(酷喵怎么退出登录账号)

    酷喵怎么退出登录(酷喵怎么退出登录账号)

  • 闲聊的收款二维码在哪里(闲聊app里的钱还能取出来吗)

    闲聊的收款二维码在哪里(闲聊app里的钱还能取出来吗)

  • 华为m5青春版怎么调分辨率(华为m5青春版怎么样)

    华为m5青春版怎么调分辨率(华为m5青春版怎么样)

  • Win10 21H1将删除Flash Player 7月将通过星期二补丁彻底删除(win10删除了此电脑)

    Win10 21H1将删除Flash Player 7月将通过星期二补丁彻底删除(win10删除了此电脑)

  • 克卢恩国家公园保护区的山脉和冰川,加拿大育空地区 (© Design Pics Inc/Alamy)(加拿大克卢恩国家公园)

    克卢恩国家公园保护区的山脉和冰川,加拿大育空地区 (© Design Pics Inc/Alamy)(加拿大克卢恩国家公园)

  • Oracle21C:Windows版本的安装、卸载、环境变量配置、避坑指南|ORA-12514|为什么安装目录没有bin目录(oracle win10)

    Oracle21C:Windows版本的安装、卸载、环境变量配置、避坑指南|ORA-12514|为什么安装目录没有bin目录(oracle win10)

  • h5接微信js-sdk的详细步骤(h5链接js)

    h5接微信js-sdk的详细步骤(h5链接js)

  • 正在求偶的凤头卡拉鹰,美国德克萨斯州 (© Alan Murphy/Minden Pictures)

    正在求偶的凤头卡拉鹰,美国德克萨斯州 (© Alan Murphy/Minden Pictures)

  • 盘点ChatGPT的使用资源(chatplus)

    盘点ChatGPT的使用资源(chatplus)

  • 2021城建税
  • 一般纳税人结转增值税的账务处理
  • 自己开车差旅费报销流程怎么写
  • 交强险怎么报销流程
  • 独立核算的分公司
  • 小规模差额征税会计分录实例
  • 其他应付款属于哪类
  • 未能及时取得成功的成语
  • 投资款转为借款需要哪些证据
  • 贷款厂家贴息
  • 完成税务登记之后多久开始报个税?
  • 跨省非独立核算分公司如何报税
  • 航天金税费用怎么做账
  • 未来公司销售一批产品给东方公司
  • 购买加油卡能否开发票
  • 清算结业是什么意思
  • 退休返聘人员的劳动权益保护
  • 如何在电脑上玩三国杀移动版
  • ios路由设计
  • el-cascader动态加载多级
  • 个体户升一般纳税人分红怎么交税
  • 税额差异会计分录
  • 年终奖计提和发放
  • 鸿蒙实用工具在哪里
  • php中字符串函数
  • 购进商品怎么做会计分录
  • php数组函数,选班长
  • PHP:pg_fetch_all()的用法_PostgreSQL函数
  • 企业的支付宝
  • 康沃尔公国范围
  • 企业发生的现金折扣应计入什么费用
  • 担保余值计算公式
  • php的header函数
  • php字符串转换
  • redisson php
  • 企业盈利不交所得税的办法
  • 教育费附加免征额
  • 织梦添加文章如何修改高级参数
  • 应交税费的明细账怎么登记
  • 定额转查账征收
  • 药品进销差价会计科目
  • 小规模纳税人缴纳增值税怎么做账
  • 私募基金如何做账
  • 金税盘未响应什么意思
  • 疫情防控重点保障物资免征增值税
  • 盈利能力分析对企业发展的意义
  • 员工外出培训报告范文
  • 采购商品验收入库的会计分录怎么写
  • 销售收入用营业收入还是营业总收入
  • 银行日记账余额与银行对账单不符
  • sql is in
  • mysql Sort aborted: Out of sort memory, consider increasing server sort buffer size的解决方法
  • java下一页
  • linux oos
  • workbench如何运行
  • mac安装mysql
  • 路由怎么配
  • xmp文件是干嘛用的
  • winproxy.exe - winproxy是什么进程
  • win1020h2正式版
  • win7网络不能用怎么办
  • win命令行杀死一个程序
  • 各种linux系统比较
  • opengl教程48讲
  • 新闻客户端有哪些?
  • 安卓十游戏怎么玩
  • 语音单词怎么读
  • js数组洗牌
  • json web key
  • 离线安装驱动
  • Python中urllib+urllib2+cookielib模块编写爬虫实战
  • 使用jquery
  • unity3d mod
  • 完美世界打斗
  • javascript的返回值
  • 返利是否合法
  • 河南车船税收费标准图片
  • 张家港市有什么好吃的美食
  • 理财持有时间
  • epc项目不接受联合体投标违规吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设