Detailed description on the use of the WeChat applet template and template

Detailed description on the use of the applet template and the use of the template

This article shares the usage of the mini-program template for your reference. The specific content is as follows:

Take the home page and list page of The MUI instance as an instance

We can see that the list of the two pages is very similar, and each row is used as a unit to create a template.

Template

1. location where the template is stored and where the template page is stored

WXML of template

<! -- No arrow on the right --> <template name = "listNone"> <view class = "tui-menu-list"> <navigator url = "{item. url }}"> <block> <text >{{ item. title }}</text> </block> </navigator> </view> </template> <! -- There is an arrow on the right --> <template name = "list"> <view class = "tui-menu-list tui-youjiantou"> <navigator url = "{item. url }}"> <block> <text >{{ item. title }}</text> </block> </navigator> </view> </template>

Note:Two templates are created in the same WXML file. One has an arrow on the right and the other has no arrow on the right, which is identified by name.
WXSS of template

.tui-menu-list{ line-height: 80rpx; color: #555; font-size: 35rpx; padding: 0 0rpx 0 10px; position: relative;}

Use template on the index page

WXML

<import src="../../template/list.wxml"/><view class="tui-fixed"> <scroll-view style="height:100%;" scroll-y="true"> <template wx:for="{{menu}}" is="list" data="{{item}}"></template> </scroll-view></view>

• Use import to introduce the template;
• When a template is used, the "is" attribute of the template corresponds to the "name" attribute in the template, indicating the specific template you want to use. The "data" attribute is the data to be used in the template. Note that the data structure must be the same;
• You can directly cycle the template, or you can add a layer in the template for loop.
  

WXSS

Here we will introduce WXSS to the global!

@import "./template/list.wxss";

• Import the list WXSS directly using import;
• This code can be stored in the WXSS (index. wxss) of the current page, or in the global wxss (app. wxss;
• Suggestion: if the project requires a large number of templates, WXSS will be introduced to the global environment to reduce the amount of code. If the project only uses templates in a few places, you can introduce WXSS on the desired page.
  

Use template on the list page

WXML

<Import src = ".. /.. /template/list. wxml "/> <view class =" tui-list-box "> <view class =" tui-list-head "> no arrows on the right </view> <template wx: for = "{menu }}" is =" listNone "data =" {item }}"> </template> </view> <view class = "tui-list -box "> <view class =" tui-list-head "> there is an arrow on the right </view> <template wx: for = "{menu }}" is =" list "data =" {item }}"> </template> </view> <view class = "tui-list -box-raduis "> <view class =" tui-list-head "> rounded corner list </view> <template wx: for = "{menu }}" is =" list "data =" {item }}"> </template> </view>

Summary

• To use similar modules on multiple pages in a project, you need to create a template to reduce the amount of code and make the code highly reusable;
• Create multiple similar templates in the same WXML file and use the name attribute to differentiate them;
• The difference between the global introduction of the template wxss and the use page is the template usage;
• Use import to introduce the WXML and WXSS templates;
• Use the template tag using the template tag. The is attribute of the template tag corresponds to the name attribute of the template, and the data attribute represents the data imported into the template.

Download DEMO

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.