首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名
例如,我们封装的组件名为 **wxzx-loadmore
- wxzx-loadmore.wxml
<view hidden="{{response.length < 1}}">
<view class="weui-loadmore" hidden="{{is_loadmore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<view class="weui-loadmore weui-loadmore_line" hidden="{{!is_loadmore}}">
<text class="weui-loadmore__tips">{{tip}}</text>
</view>
</view>
复制代码
这里就是把index.wxml中的需要封装成组件的代码原样copy过来
- wxzx-loadmore.js
Component({
/**
* 组件的属性列表
*/
properties: {
response: {
type: String,
value: ''
},
is_loadmore: {
type: Boolean,
value: false
},
tip: {
type: String,
value: '我是有底线的'
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
emit: function(data) {
// 自定义组件向父组件传值
let val = data,
my_event_detail = {
val: val
}
// myevent自定义名称事件,父组件中使用
this.triggerEvent('myevent', my_event_detail)
/*
在父组件中写上bind:myevent="get_emit",在父组件中就需要调用get_emit事件
*/
},
}
})
复制代码
- index.wxml 父组件
<wxzx-loadmore
response="{{comment_list}}"
is_loadmore="{{is_loadmore}}"
bind:myevent="get_emit"
></wxzx-loadmore>
<!-- 这就是在父组件中调用子组件,然后基于子组件传值来在父组件中赋值 -->
复制代码
- index.js 中
// 接受子组件的传值
get_emit: function (e) {
this.setData({
is_show: e.detail.val
})
},
复制代码
- index.json 这里需要引入组件,在哪个父页面中引用子组件,就在哪个json文件中引入
{
"usingComponents": {
"wxzx-loadmore": "/component/wxzx-loadmore/wxzx-loadmore"
}
}
复制代码