Generic Item View
In our example omponent, we have a item-view custom component that will be applied as a generic component.
pages/example/example.wxml
|
1 |
<pageView class="page-view" bind:getList="getUserList" list="{{userList}}" total="{{userTotal}}" generic:selectable="item-view"> |
In other pages, when we create a generic component and create a tag called selectable. You can name this whatever you want.
For example, in custom component pageView page-view’s index.json and index.wml, we declare custom generic tag called “rickycao” under componentGeneric:
index.json
|
1 2 3 |
"componentGenerics": { "rickytsao": true }, |
Then use it in the wx html file like this:
index.wxml
|
1 |
<rickycao item="{{item}}" key="{{index}}"></rickycao> |
In order to use rickycao tag, it is looking for a custom component that serves as generic (as indicated in componentGenerics). So when we use
the tag rickycao, we know which custom component to use.
In order to provide this generic, we must do so like this:
generic:rickytsao, and as a property of using our pageView component.
example.wxml
|
1 2 3 4 5 |
<pageView class="page-view" bind:getList="getUserList" list="{{userList}}" total="{{userTotal}}" generic:rickytsao="item-view"> |
where item-view is declared in:
example.json
|
1 2 3 4 5 6 7 |
{ "usingComponents": { "pageView": "../../components/page-view/index", "item-view": "./item-view", "body": "../../components/body-view/index" } } |
Let’s use the custom tag itemview
components/page-view/index.json
|
1 2 3 |
"componentGenerics": { "itemview": true } |
Then in that wx html file, we use it as a tag and then insert our values into its properties.
components/page-view/index.wxml
|
1 |
<itemview item="{{item}}" key="{{index}}"></itemview> |
We use a custom component, and then say that we are applying our item-view component as a generic component: