位置: 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优化器调参记录(模型参数是什么意思)

  • 华为手机微信怎么恢复已备份的聊天记录(华为手机微信怎么设置密码才能进入)

    华为手机微信怎么恢复已备份的聊天记录(华为手机微信怎么设置密码才能进入)

  • 华为p405g开关在哪里(p405g开关怎么没了)

    华为p405g开关在哪里(p405g开关怎么没了)

  • 微信卖了没取消实名制(微信卖了没取消会怎么样)

    微信卖了没取消实名制(微信卖了没取消会怎么样)

  • 华为mate20要不要更新系统

    华为mate20要不要更新系统

  • 手机指环扣松了怎么办(手机指环扣松了小窍门)

    手机指环扣松了怎么办(手机指环扣松了小窍门)

  • 华为手机升级10.0很多软件用不了怎么办(华为手机升级10后卡二找不到)

    华为手机升级10.0很多软件用不了怎么办(华为手机升级10后卡二找不到)

  • 微信账号为什么自己冻结了(微信账号为什么会被冻结)

    微信账号为什么自己冻结了(微信账号为什么会被冻结)

  • 手机一直是3g没有网络(手机一直是3g没有网络怎么回事)

    手机一直是3g没有网络(手机一直是3g没有网络怎么回事)

  • 数据库的四种模型(数据库四种数据模型)

    数据库的四种模型(数据库四种数据模型)

  • 苹果手提电脑开不了机怎么回事(苹果手提电脑开机密码怎么设置)

    苹果手提电脑开不了机怎么回事(苹果手提电脑开机密码怎么设置)

  • vce-al00华为什么型号(华为 vce al00)

    vce-al00华为什么型号(华为 vce al00)

  • ies文件是什么文件(ied是什么格式)

    ies文件是什么文件(ied是什么格式)

  • vivoz5菜单键如何设置(vivo手机的菜单键是哪个键)

    vivoz5菜单键如何设置(vivo手机的菜单键是哪个键)

  • 爱奇艺导航在哪里设置(爱奇艺导航在哪里)

    爱奇艺导航在哪里设置(爱奇艺导航在哪里)

  • 微信朋友圈草稿箱在哪(微信朋友圈草稿怎么找回)

    微信朋友圈草稿箱在哪(微信朋友圈草稿怎么找回)

  • oppor17关机键在哪里(oppor17关机键坏了怎么重启)

    oppor17关机键在哪里(oppor17关机键坏了怎么重启)

  • 荣耀v20怎么看后台运行(荣耀v20手机型号怎么看)

    荣耀v20怎么看后台运行(荣耀v20手机型号怎么看)

  • 华为手机怎样返回主页(华为手机怎样返回原来桌面)

    华为手机怎样返回主页(华为手机怎样返回原来桌面)

  • 小米ai音箱可以改名字吗(小米ai音箱可以当电脑音响吗)

    小米ai音箱可以改名字吗(小米ai音箱可以当电脑音响吗)

  • 手机计时器在哪(华为手机计时器在哪)

    手机计时器在哪(华为手机计时器在哪)

  • win10重置成功率(windows10重置会怎么样)

    win10重置成功率(windows10重置会怎么样)

  • 苹果xr配的什么耳机(苹果xr配套)

    苹果xr配的什么耳机(苹果xr配套)

  • 华为p30指示灯设置(华为p30pro指示灯)

    华为p30指示灯设置(华为p30pro指示灯)

  • 华为p30pro支持nfc吗(华为p30pro支持NFC吗)

    华为p30pro支持nfc吗(华为p30pro支持NFC吗)

  • 8p自动调节亮度在哪里(8p 自动亮度)

    8p自动调节亮度在哪里(8p 自动亮度)

  • 任务栏图标调大小教程(任务栏图标调大了怎么办)

    任务栏图标调大小教程(任务栏图标调大了怎么办)

  • 一般纳税人收到普票如何入账
  • 不动产租赁可以加计扣除吗
  • 减去税率怎么算
  • 2020年小规模纳税人增值税起征点
  • 税务局未核定的印花税
  • 开票时间超限怎么办
  • 结算金额和付款金额
  • 向投资者支付的股息红利等权益性投资收益款项
  • 研发费用可以结转以后年度抵扣吗对吗
  • 可供出售金融资产和长期股权投资
  • 分期收款销售商品确认收入会计分录
  • 购买实验器材会计分录
  • 销售生产用原材料取得的收入计入什么科目
  • 新成立公司注资流程
  • 增值税专用发票和普通发票的区别
  • 待认证税额是几级科目
  • 大中小型企业标准划分表
  • 季初是什么意思
  • 收取滞纳金是行政处罚吗
  • 代开发票预缴的增值税能否申请退税
  • 企业所得税年报和增值税收入不一致
  • 评标费由谁支付
  • 筹建期间发生的收入
  • 房地产开发企业所得税管理办法
  • 公司对项目的资金支持
  • 小微企业需要税务登记吗
  • 工程公司收到工程款
  • 英雄联盟登录失效怎么回事
  • phpexplode函数
  • springboot集成camunda+bpmn
  • 建筑公司收到工程款需要交哪些税
  • php抓取网页内容转换成json
  • 艾灸的好处与功效女人
  • 出口退税率为0怎么处理
  • 金融商品转让业务包括
  • gridview用法
  • yii框架教程
  • 先开票后发货合法吗
  • 防抖节流实现原理
  • 调整价格差额计算应采用
  • 合伙企业个人所得税税率表
  • 缴税零申报
  • 银行共管账户怎么提款
  • 期初应收账款对应什么科目试算平衡
  • 购买员工团体意外险需要缴纳个税么
  • 即期外汇交易有风险吗
  • 个人所得税如果不补税会怎么样
  • 其他应收账款的会计分录
  • 企业提取盈余公积的比例
  • 递延收益的影响
  • 建筑业营改增后税务问题
  • mysql加密解密
  • win8无法连接wifi
  • arch linux安装yay
  • fedora 10
  • hl.exe是什么
  • win7系统电脑屏幕倒过来了怎么办
  • windows8触摸屏手势设置
  • win8为什么
  • win8.1技巧
  • win10安装win7主题
  • 删除同步中心图标
  • win10系统怎么cmd
  • Win7系统如何打开摄像头
  • win7屏幕刷新率怎么调高
  • 重装操作系统后无法开机
  • 字符串截取用什么方法
  • c# unity 教程
  • unity调色插件
  • Python函数中仅允许有一条return语句
  • c# /n
  • jQuery模仿阿里云购买服务器选择购买时间长度的代码
  • jquery中用onclick绑定点击事件
  • android数据存储文件读写实验
  • 调查问卷的背景资料怎么写
  • 南京税务局几点下班?
  • 中国地税发展现状
  • 新版零申报印花税怎么申报
  • 汕头汕尾什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设