1.根目录的components是用来自定义组件的文件夹,新建文件夹之后新建component才可以成功创建可以使用的组件
注意点:
1.自定义组件的json文件中必须声明"component": true 按步骤创建,小程序会自动生成
2.自定义组件的js文件中使用的函数不再是Page而是Component,所有的组件方法必须使用methods包裹
2.组件传值
父传子(只是一个简单的demo,实现父组件传递值给自定义组件)
实现效果
自定义组件部分
wxml
<view class="flex_Center backgroundViewStyle">
<view class="flex_Center demoButtonStyle" bindtap="onClickButton">查看顶部提示</view>
</view>
<view class="toptips {{ isTopTips ? ‘toptips--show‘ : ‘‘ }}">{{ message }}</view>
js
let timer = null;
Component({
properties: {
message: { // message为定义的值
type: String, // 传递的值类型
value:"默认值" // 自定义组件默认值
}
},
data: {
isTopTips: false,
},
methods:{
// 页面加载
onUnload: function () {
clearTimeout(timer);
},
// 点击按钮
onClickButton: function(){
let that = this;
that.setData({
isTopTips: true
});
timer = setTimeout(function () {
that.setData({
isTopTips: false
});
}, 1500);
}
}
})
wxss
.backgroundViewStyle{
background:white;flex-direction:column;
}
.toptips {
display: block;
position: fixed;
-webkit-transform: translateZ(0) translateY(-100%);
width: 100%;
/* 至少有一行的高度,保证第一次动画显示正常 */
min-height: 32px;
top: 0;
left:0;
line-height: 2.3;
font-size: 14px;
text-align: center;
color: #FFF;
background-color: #E64340;
z-index: 110;
/* 动画部分 */
transition: all 0.4s ease;
}
.toptips--show {
-webkit-transform: translateZ(0) translateY(0);
}
父组件部分
// 第一步json文件中进行引入组件
{
"usingComponents": {
"topmsg":"/components/topmsg/topmsg"
}
}
// 第二步,引入成功之后使用标签渲染
// json文件中topmsg是引入组件的名称,也可以自定义
<!-- 顶部提示 -->
<view class="uploader">
<view class="uploader-text">
<topmsg message="我是一个自定义组件"/>
</view>
</view>