1.应用场景
我们在开发时,封装一个公共底部组件,该组件拥有两个部分,第一部分是电话报名,第二部分是表单报名。我们需要在很多页面中使用这个组件,并且电话报名和表单报名逻辑是不同的,只有样式是相同的。
此时,我们可以令这个组件暴露出两个方法供外部调用。
2.组件封装
html文件
comp.wxml
<!--底部报名表单组件-->
<view class="tapplyfooter">
<view class="tapplyfooter-left">
...
</view>
<view class="tapplyfooter-center"
catchtap="callGroupNow"
>
<image class="tapplyfooter-center-img" src="../../../assets/common/phone-white.svg" />
</view>
<button
class="tapplyfooter-right"
open-type="getPhoneNumber"
bindgetphonenumber="getApplyPhoneNumber"
>
表单报名
</button>
</view>
js文件,暴露方法出去
// components/common/TApplyFooter/TApplyFooter.js
Component({
properties: {
},
data: {
},
methods: {
// 报名咨询
callGroupNow:function(){
this.triggerEvent('callGroupNow'); //将这个方法暴露出去,在父组件使用bindcallGroupNow调用
},
getApplyPhoneNumber:function(e){
this.triggerEvent('getApplyPhoneNumber',e); //将这个方法暴露出去,在父组件使用bindcallGroupNow调用,e是传递出去的数据
}
}
})
less文件,样式设置
comp.less
button::after{ border: none; } // 去除button按钮默认边框
.tapplyfooter{
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ 底部安全距离
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ 底部安全距离
position: fixed;
bottom: 0;
height: 120rpx;
width: 100%;
background: #ffffff;
display: flex;
&-left{
width:308rpx;
padding: 24rpx 32rpx;
display: flex;
align-items: center;
.hasMarginImage{
margin-right: 18rpx;
}
}
&-center{
flex-shrink: 0;
width: 166rpx;
background: linear-gradient(139deg, #94D56E 0%, #B0DD68 100%);
display: flex;
justify-content: center;
align-items: center;
&-img{
display: inline-block;
width: 48rpx;
height: 48rpx;
}
}
&-right{
background: linear-gradient(139deg, #FFA544 0%, #FF781E 100%);
width: 276rpx;
text-align: center;
line-height: 120rpx;
color: #FFFFFF;
font-size: 32rpx;
border-radius: 0 !important;
border: none !important;
outline: none !important;
}
}
3.父组件中引入
3.1 在app.json中将该组件注册
"t-apply-footer":"/components/common/TApplyFooter/TApplyFooter",
3.2 在页面中引入该组件
页面中引入该组件,并使用bind[暴露方法]形式定义该方法,bindcallGroupNow引用方法,callGroupNow页面中要执行的方法操作
page.wxml:
<t-apply-footer
bindcallGroupNow="callGroupNow"
bindgetApplyPhoneNumber="getApplyPhoneNumber"
/>
page.js
callGroupNow: async function () {},
getApplyPhoneNumber: async function (e) {}, // e为暴露方法时传递过来的参数
总结用法,希望可以帮助到你,
我是Ably,你无须超越谁,只要超越昨天的自己就好~