This is the 8th day of my participation in the More Text Challenge in August. For more details, see more Text Challenge

Sliding component

scroll-view

This is a sliding component

Property: scroll-x scroll-y determines the slide direction

Scroll-into-view determines the display position of the subcomponent. The value is the id of the subcomponent

swiper

Swiper is equivalent to UL

Properties:

Indicator -dots: Whether dots are displayed

Indicator color: The color of the dots when they are not selected

Indicator -active-color: Indicates the color of the dots when they are selected

Autoplay: Automatic round play

Interval: indicates the rotation interval

Child components: Swiper-item is equivalent to Li

For example:

<! --pages/swiper/swiper.wxml--><swiper indicator-dots indicator-active-color='orange' indicator-color='black'  autoplay interval='3000'>
<swiper-item>
    <image src="https://www.baidu.com/img/bd_logo1.png?where=super"></image>
</swiper-item>
</swiper>
Copy the code

WeChat instruction

wx:for

If the value is a string, a Boolean, a number, etc., insert the field directly.

But if the value is a member of an array. You need to fill it out one by one, but if the array length is variable. It’s going to be very troublesome. At this point, we can use the instructions provided by wechat to solve the problem.

Simply put, wx:for is a circular interpolation syntax.

Rule: wx:for=”{{looping contents}}”

You can use {{index}} to represent the index of a member in the component where wx:for is located

You can use {{item}} to represent the members themselves within the wx:for component

Usage:

Data in JS file:

data: {
    arr: "abcdefghijkl".split("")}Copy the code

Instructions in the WXML file use:

<view wx:for="{{arr}}">{{index}} {{item}}</view>
Copy the code

The console can view what is displayed.

At this point, the render is complete, but there is a warning in the console.

This is because wechat wants to listen to the status of each value, so each value is bound with WX :key.

So we need to specify the value:

<view wx:key="{{this}}" wx:for="{{arr}}">{{index}} {{item}}</view>
Copy the code

Wx: the for – index and wx: for the item

The single-layer instruction is over, but what about the multi-layer?

We can use wx:for-index=”XXX” to change the default index to a custom name

We can use wx:for-item=”YYY” to change the default item to a custom name

Note: Once changed, the default index and item will no longer be used

wx:if

This directive is used to control the visibility or invisibility of a component

Usage:

<! --pages/if/if.wxml-->
<text wx:if="{{buer}}">pages/if/if.wxml</text>
<text>hahahahhaa</text>
Copy the code

JS file data:

data: {
  buer: false
}
Copy the code

Render result: Because buer is false, the component is not rendered because of the if directive

The template

In wechat, there are two kinds of templates.

The template component

The template is defined by the Template component, and the name attribute is given a value

<! -- Define a template using the template component --><template name="form">
    <form>
        <view>
            <input type="text"></input>
        </view>
    </form>
 </template>
<view>1</view>
Copy the code

The render result is:

We noticed that the form did not appear.

This is because at this point, the template is only defined and not yet used.

Templates are used through the Template component and given the value of the is property

Usage:

<view>1</view>
<template is="form"></template>
Copy the code

At this point, you’re ready to print

WXML template

The WXML file itself is the template

In a template folder, you have hahaha. WXML and template-wxml

Where we hahaha. WXML is the template file.

hahaha.wxml:

<view> hahaha </view>Copy the code

In template.wxml, use:

<include src="./hahaha.wxml"></include>
Copy the code

Now render:

The include components

Function: Import content from external WXML files. Usage:

<include src="./hahaha.wxml"></include>
Copy the code

The import components

Function: Import templates from external WXML files.

Usage:

<import src="./tmp.wxml"></import>
Copy the code

At this point, the templates defined by template in the tmp.wxml file are available here.