About tabBar in app.json

In app.json, tabBar lists are 2 to 5 items. For details, see app.json global configuration. The default tabBar position is at the bottom of the page. The position of the tabBar at the bottom or top of the page is adjustable. The parameter is position.

"tabBar": {
    "position": "top"."list": [//...... //list must contain 2 to 5 elements]}Copy the code

Data binding in component property values

The data binding section of the view template can be used not only as component content, but also as component property values:

<! --index.wxml-->
<view id="{{userId}}">I am a {{userName}}</view>

//index.js
Page({
    data: {
        userName: "Anna",
        userId: "HDu323f"
    },
})
Copy the code


I’m Anna

Elements of the hidden

Element display and hiding can be controlled using the true and false values of hidden, which is similar to vue’s V-show in that hidden is rendered both explicitly and implicitly, but not on the page.

About Loop Rendering

Key in loop rendering

In this loop, index is a unique value, but not a stable unique value.

<! --index.wxml-->
<view wx:for="{{arr}}" wx:key="index" bindtap='tapHandler' data-id='{{item.id}}'>{{item.text}}</view>//index.js data: { arr: [ {id: 1, text: "a"}, {id: 2, text: "b"}, {id: 3, text: "C "}],}, tapHandler(e) {let arr = this.data.arr.filter(item => {return item.id! = e.target.dataset.id}) this.setData({ arr }) },Copy the code

In the “A”, “B” and “C” rendered on the page, click on “A” and the “A” will be deleted. Since the key of the element is index, the original “A-0, B-1, C-2” will be deleted and the block will be re-rendered as “B-0, C-1″. So in the loop, index is unique, but not a stable unique value. Wx :key=”{{item.id}}” wx:key=”{{item.id}}” In this way, during the demo above, “B-1, C-2” will not be reassigned to render after clicking a element to delete it.

Renaming item in loop rendering

In wx:for, the index value is index by default, and the element itself is item by default. For item, we can rename it:

<! --item renamed to I -->
<view wx:for="{{arr}}" wx:for-item="i" wx:key="{{i.id}}" bindtap='tapHandler' data-id='{{i.id}}'>{{i.text}}</view>
Copy the code

Template The use of the template

<! --hello.wxml-->
<template name="h">Hello~</template>
<template name="hi">Hello~{{user}}</template>

<! --index.wxml-->
<! -- Hello. WXML and index. WXML are in the same directory -->
<import src="hello.wxml"/>
<template is="h"></template>
<template is="hi" data="{{user: 'Anna'}}"></template>
<! -- render the result as "Hello~Hello~Anna" -->
Copy the code