位置: IT常识 - 正文

【小程序】微信小程序自定义组件Component详细总结(小程序微信认证)

编辑:rootadmin
【小程序】微信小程序自定义组件Component详细总结 1- 前言

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

文章相关热门搜索词:小程序微信支付手续费,小程序微信认证,小程序微信怎么打开,小程序微信认证,小程序微信授权登录,小程序微信开发平台,小程序微信认证,小程序微信认证,内容如对您有帮助,希望把文章链接给更多的朋友!

在本文中你将收获

小程序如何使用自定义组件自定义组件之间的传值自定义组件中插槽的使用2- 组件文件新建2.1 定义组件

在根目录新建components文件夹,建立cell 文件夹,右击创建cell的Component组件

cell.jscell.wxmlcell.jsoncell.wxss2.2 注册组件

页面的xxx.json ,usingComponent注册

"usingComponents": {"item":"/components/item/item"}2.3 使用组件<item></item>2.4 图参考【小程序】微信小程序自定义组件Component详细总结(小程序微信认证)

3- 外部类和样式隔离3.1定义组件cell.wxml 文件<view class="cell cell-class"></view>cell.wxss/* pages/com/com.wxss */.cell{ color: tomato;}.mycell{ color: #f70; line-height: 120rpx !important;}cell.js 文件 /* 选项 */ options:{ /* 样式隔离:apply-shared 父影响子 shared 父子相互影响 isolated 相互隔离 */ styleIsolation:'isolated', }, //通过组件的外部类实现父组件控制自己的样式 externalClasses:["cell-class"],3.2 使用组件<cell></cell><cell cell-class="mycell"></cell>

3.3 图解释

4- 组件插槽4.1 默认插槽cell.wxml <view class="cell"> 我是cell组件 <slot></slot></view>cell.js /* 选项 */ options:{ //允许多个插槽 multipleSlots:true, },cell.wxss.cell{ height: 88rpx; line-height: 88rpx; border-bottom: 1rpx solid #cccccc;}使用cell组件<cell> <text>放假</text> <text>快点到来</text></cell>

4.2 命名多插槽cell.wxml <view class="cell cell-class"> <slot name="pre"></slot> 我是cell组件 <slot></slot> <slot name="next"></slot></view>cell.js /* 选项 */ options:{ //允许多个插槽 multipleSlots:true, },cell.wxss.cell{ height: 88rpx; line-height: 88rpx; border-bottom: 1rpx solid #cccccc;}com.wxml<!-- 插槽 --><cell> <text slot="pre">🐱‍👓</text> <text slot="next">🐱‍🚀</text> <text>放假</text> <text>快点到来</text></cell><cell cell-class="mycell"> <text slot="next">🎉</text> <text slot="pre">🐱‍</text> <text>做核酸</text> <text>今天要做</text></cell>

5- 组件传参5.1 父传子5.1.1 定义组件cell.wxml<view class="cell"> <text>{{title}}</text> <text>{{num}}</text></view>cell.js// components/cell/cell.jsComponent({ /* 选项 */ options:{ /* 样式隔离:apply-shared 父影响子 shared 父子相互影响 isolated 相互隔离 */ styleIsolation:'isolated', //允许多个插槽 multipleSlots:true, }, /** * 组件的属性列表 */ properties: { title:{ type:String, value:"" }, num:{ type:Number, value:1 } }, /** * 组件的初始数据 */ data: { //定义组件自己的数据count count:1 }, /** * 组件的方法列表 */})5.1.2 使用组件com.wxml<cell title="做核酸" num="{{5}}"></cell><cell title="烦呐"></cell> 5.1.3 图解

5.2 子传参父5.2.1 定义组件cell.wxml<view class="cell" bindtap="tapHd"> <text>{{title}}</text> <text>{{count}}</text></view>cell.js// components/cell/cell.jsComponent({ /* 选项 */ options:{ /* 样式隔离:apply-shared 父影响子 shared 父子相互影响 isolated 相互隔离 */ styleIsolation:'isolated', //允许多个插槽 multipleSlots:true, }, /** * 组件的属性列表 */ properties: { title:{ type:String, value:"" }, num:{ type:Number, value:1 } }, /** * 组件的初始数据 */ data: { //定义组件自己的数据count count:1 }, lifetimes:{ //在组件生命周期attached挂载更新count attached(){ console.log(this.data); //count 的值为父组件传递的num值 this.setData({count:this.data.num}) } }, /** * 组件的方法列表 */ methods: { tapHd(){ this.setData({count:this.data.count+5}) //发送一个事件 this.triggerEvent("cellclick",this.data.count) } }})5.2.2 使用组件com.wxml <view class="cell" bindtap="tapHd"> <text>{{title}}</text> <text>{{count}}</text></view> 5.2.3 图解

6- 案例item组件6.1 定义组件首先在根目录下创建一个专门放自定义组件的文件夹;然后在小程序编辑器里,右键,新建Component;

<!--components/item/item.wxml--><navigator class="item itemclass" url="{{url}}" open-type="{{openType}}" bindtap="itemclick"> <view class="icon" wx:if="{{icon}}"> <image src="{{icon}}" mode="aspectFill"/> </view> <view class="content"> <view class="title" wx:if="{{title}}"> {{title}} </view> <slot name="title" wx:else ></slot> <view class="right" wx:if="{{!showrslot}}"> <view class="tip">{{tip}}</view> <view class="badge" wx:if="{{badge}}"> <view wx:if="{{badge===true}}" class="dot"> </view> <view wx:else class="redbadge">{{badge}}</view> </view> <view class="arrow"></view> </view> <slot name="right" wx:else></slot> </view></navigator>/* components/item/item.wxss */.item{ line-height: 88rpx; display: flex; align-items: center; justify-content: space-between;}.icon{ margin-left: 30rpx; margin-right: 30rpx; height: 100%; display: flex; align-items: center;}.icon image{ width: 60rpx; height: 60rpx;}.content{ padding: 0 30rpx; border-bottom: 1rpx solid #ccc; display: flex; flex: 1;}.title{ flex: 1; color: #333; font-size: 35rpx;}.right{ display: flex; align-items: center;}.right .arrow{ height: 25rpx; width: 25rpx; border-top: 3rpx solid #999; border-right: 3rpx solid #999; transform: rotate(45deg);}.tip{ color: #999; font-size: 28rpx;}.dot{ height: 15rpx; width: 15rpx; background-color: #f30; margin-left: 15rpx; border-radius: 50%;}.redbadge{ font-size: 20rpx; padding: 5rpx; background-color: #f30; width: 30rpx; max-height: 30rpx; line-height: 30rpx; color: #fff; text-align: center; margin-left: 15rpx; border-radius: 20rpx;}6.2 使用组件引入组件:在页面的 json 文件中进行引用
本文链接地址:https://www.jiuchutong.com/zhishi/300460.html 转载请保留说明!

上一篇:【Vue+element-ui搭建前端页面】适用于初学者学习(vue+element-ui项目)

下一篇:模型调参常见问题及Aadm优化器调参记录(模型参数是什么意思)

  • 钉钉里面接龙怎样往下接(钉钉里面接龙怎么接)

    钉钉里面接龙怎样往下接(钉钉里面接龙怎么接)

  • 格力空调手机遥控器怎么用(格力空调手机遥控器开关)

    格力空调手机遥控器怎么用(格力空调手机遥控器开关)

  • 360云盘现在还能用吗(360云盘还能登录吗)

    360云盘现在还能用吗(360云盘还能登录吗)

  • 华为荣耀10青春版屏幕多高(华为荣耀10青春版有nfc功能吗)

    华为荣耀10青春版屏幕多高(华为荣耀10青春版有nfc功能吗)

  • 快手私信一天上限多少(快手一天能私信多少人有数量限制吗)

    快手私信一天上限多少(快手一天能私信多少人有数量限制吗)

  • 手机锁屏密码忘记了怎么才可以重新打开(手机锁屏密码忘了怎么办10秒解决)

    手机锁屏密码忘记了怎么才可以重新打开(手机锁屏密码忘了怎么办10秒解决)

  • 怎么投诉淘宝旗舰店(投诉淘宝旗舰店的各种方法)

    怎么投诉淘宝旗舰店(投诉淘宝旗舰店的各种方法)

  • 手机上wps不能看批注吗(手机wps显示不出来所有文档内容)

    手机上wps不能看批注吗(手机wps显示不出来所有文档内容)

  • rec按键是什么意思(rec按键是什么意思电脑)

    rec按键是什么意思(rec按键是什么意思电脑)

  • 充电口怎么清灰(如何清除充电口灰尘)

    充电口怎么清灰(如何清除充电口灰尘)

  • 手机显示黑白色怎么变回彩色的(手机显示黑白色怎么变回彩色的oppo)

    手机显示黑白色怎么变回彩色的(手机显示黑白色怎么变回彩色的oppo)

  • 最小生成树和最短路径的区别(最小生成树和最小支撑树)

    最小生成树和最短路径的区别(最小生成树和最小支撑树)

  • 手机自带浏览器打不开怎么办(手机自带浏览器的回收站在哪里)

    手机自带浏览器打不开怎么办(手机自带浏览器的回收站在哪里)

  • 如何查看美团隐藏号码(如何查看美团隐藏地址)

    如何查看美团隐藏号码(如何查看美团隐藏地址)

  • 办公室自动化属于什么应用(办公室自动化属什么行业)

    办公室自动化属于什么应用(办公室自动化属什么行业)

  • 华为手电筒快捷键(华为手电筒快捷设置)

    华为手电筒快捷键(华为手电筒快捷设置)

  • ipone5s支持4g网络吗(iphone5s能用4g)

    ipone5s支持4g网络吗(iphone5s能用4g)

  • 手机进水没信号怎么办(手机进水没信号修理一般要多少钱)

    手机进水没信号怎么办(手机进水没信号修理一般要多少钱)

  • 乐视怎么双清(乐视2双清不了怎么回事)

    乐视怎么双清(乐视2双清不了怎么回事)

  • 苹果7p建议升级13的系统不(苹果7p建议升级15.72吗)

    苹果7p建议升级13的系统不(苹果7p建议升级15.72吗)

  • 探探是什么时候发布的(探探是什么时候火起来的)

    探探是什么时候发布的(探探是什么时候火起来的)

  • 苹果压盖板是什么意思(苹果压盖板还是原装屏吗)

    苹果压盖板是什么意思(苹果压盖板还是原装屏吗)

  • 微信视频倒立怎么调整(微信视频倒过来怎样摆正)

    微信视频倒立怎么调整(微信视频倒过来怎样摆正)

  • vivox27支持人脸识别吗(vivo x27人脸识别)

    vivox27支持人脸识别吗(vivo x27人脸识别)

  • 怎么查手机下载过的软件(怎么查手机下载记录)

    怎么查手机下载过的软件(怎么查手机下载记录)

  • VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频(vue中的...)

    VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频(vue中的...)

  • 【OpenCV】Qt + OpenCV 开发配置 + 入门知识(代码示例)(qt opencv ffmpeg)

    【OpenCV】Qt + OpenCV 开发配置 + 入门知识(代码示例)(qt opencv ffmpeg)

  • vgreduce命令  删除物理卷(vgreduce --removemissing)

    vgreduce命令 删除物理卷(vgreduce --removemissing)

  • 企业所得税弥补亏损明细表怎么看
  • 税财通财务软件备份与恢复
  • 上下班出了事故算不算工伤
  • 季报利润总额是填本季度金额还是本年累计数
  • 2019年研发费用加计扣除标准
  • 科目汇总表会计核算形式
  • 私售发票如何处罚
  • 其他收益科目账务处理
  • 售楼部垃圾桶
  • 一张合同分三次收款怎么开票?
  • 计提坏账准备的前提条件
  • 个人所得税核定征收计算公式
  • 不能抵扣的进项税怎么做账
  • 公司注册资本会留存多少
  • 简易注销还要去找专管员
  • 资产减值损失属于什么科目借方增加还是减少
  • 发票是不是一定要三签才能开
  • 税务改革方向
  • 发票两边的孔怎么做
  • 环保税优惠问题
  • 工商年报的纳税总额怎么填写
  • 职工福利费和职工薪酬的区别
  • 冲减以前年度营业外收入
  • 处理废料的会计分录
  • 惠普笔记本电源适配器
  • 销售预付款会计分录
  • win10系统如何设置开机启动软件
  • 营业利润,利润总额的计算公式是
  • 我告诉你win7旗舰版
  • 其他应收款超过一年是12个月吗?
  • php常见字符串函数
  • 第二季度所得税怎么算
  • opencv.
  • 对于企业无法支付的应付账款
  • 合同补充协议印花怎么写
  • tar -xvf命令
  • 企业盘盈的固定资产其核算的会计科目是
  • 个人独资为什么不能叫公司
  • 本月没有销售收入,需要申报增值税吗
  • 公司购买的商品是白酒用于招待现金流项目是哪类
  • 收到多开发票的会计分录
  • 增值税无票收入税率变了
  • mysql开启事务语句
  • 入职体检费用报销发票怎么开
  • 多交的增值税和附加税退回,如何记账
  • 飞机票抵扣进项税怎么填附表二
  • 工程结算编制收费标准
  • 计提折旧会计分录怎么做
  • 建筑工程和建筑装饰工程的区别
  • 建筑企业增值税怎么算
  • 发票 认证抵扣
  • 未开票的收入怎么申报增值税
  • 一般纳税人增值税减免政策2023
  • 融资租赁中承租人的义务
  • 哪些项目的进项可以抵扣
  • 没有报关单可以出口吗
  • 跨年度退货可以不退款吗
  • 汽车贷款利息计算公式计算器
  • 食品生产企业成本怎么核算
  • 现金日记账的日期怎么写
  • 长期待摊费用怎么做账
  • 会计出账入账怎么做
  • sql比较两个集合
  • windows8计算机在哪儿
  • win10改用microsoft账户登录
  • srvc32.exe - srvc32是什么进程
  • windows8使用教程
  • 两种方法解决一半模型的问题
  • vmware centos8
  • win8.1系统更新
  • win7系统打开excel文件很慢或未响应
  • 关于我和鬼变成家人的那件事
  • node.js jquery
  • css网站布局实录 pdf
  • 捉虫趣事作文200字
  • python最简单
  • python bottle 教程
  • 境外承包工程款收入
  • 贵阳市税务稽查
  • 电子税务局里怎么删除购票员
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设