Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use WeChat Mini Programs WXML conditional rendering". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "WeChat Mini Programs WXML conditional rendering how to use" can help you solve your doubts.

Demand

According to the design of the location alarm program, when the device approaches or leaves a certain area, it can play a tone or trigger a timer action. According to the design, our picture looks like this.

Prompt tone selection screen

Timer selection screen

Mode of realization

Generally speaking, there are two ways to select the subsequent settings according to the action type, one is that the control itself does not switch and modify the content of the control, and the other is to switch the representation and non-representation of the control according to the needs. Here we take the second approach.

Editaction.wxml

WXML provides a method of conditional rendering that determines whether controls are displayed or not based on conditional variables. This is how it is applied in editing action screens.

Timer: {{timer_ array [timer _ index]}}

Prompt tone: {{media_ array [media _ index]}}

The wx:if and wx:else keywords are used here, and the structure is similar to that of if/else in other languages. The specific condition is to see whether the action_index is greater than 0.

Editacion.js

The value of action_index is processed in editaction.jsz. The logic is very simple.

First of all, the selected limbs for the type of action are as follows:

Action_array: ['play tone', 'start timer', 'stop timer', 'pause timer', 'restart timer']

The following processing is triggered when the user selects the action type.

BindActionTypeChange: function (e) {

Console.log ('editaction.js::bindActionTypeChange:' + e.detail.value)

This.setData ({

Action_index: e.detail.value

})

}

If the action type selected is to play the tone, the action_index will be 0, and the value of action_index will be greater than 0 when selecting other timer options. After the value of action_index is modified through setData, the components on the screen will be displayed and hidden accordingly.

After reading this, the article "how to use WeChat Mini Programs WXML conditional rendering" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.