微信小プログラムページレンダリングの実現方法

2248 ワード

この文章は主にWeChatウィジェットページのレンダリングの実現方法を紹介しています。ここでは例示コードを通じて紹介された非常に詳細です。皆さんの学習や仕事に対して一定の参考学習価値があります。必要な友達は下記を参照してください。
条件レンダリング：wx:if，wx:elif，wx:else


<view wx:if="{{list.length > 5}}" >1</view>
<view wx:elif="{{list.length > 2}}">2</view>
<view wx:else>3</view>

wx:ifはコントロール属性ですので、ラベルに追加する必要があります。一度に複数のコンポーネントラベルを判断するには、「block」ラベルを使って複数のコンポーネントを包装し、上でwx:if制御属性を使用してください。


<block>
<view wx:if="{{list.length > 5}}" >1</view>
<view wx:elif="{{list.length > 2}}">2</view>
<view wx:else>3</view>
</block>

blockは一つの包装要素で、ページで何のレンダリングもしません。
hidhen:
小さいプログラムでは、hidden=「{condition}」も要素の表示と非表示を制御できます。trueのために隠して、falseのために表示します。


<view hidden = "{{condition}}" >123</view>

リストレンダリング:wx:for
パラメータが指定されていない場合は、デフォルトのインデックスはindex、値はitemです。


<view wx:for="{{userList}}" wx:key="index">   ： {{index}},   ： {{item}}</view>
 
 data: {
  userList :['zhangsan', "lisi", 'wnagwu']
 }

索引と現在の項目の変数名を手動で指定します。


<view wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it">
    ： {{i}},   ： {{it}}
</view>
 
data: {
  userList :['zhangsan', "lisi", 'wnagwu']
 }

block wx:forリストレンダリング


<block wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it">
 <view>   ： {{i}},   ： {{it}}</view>
</block>

keyのリストサイクルの役割:
リストに項目の位置が動的に変更されたり、新しい項目がリストに追加されたりする場合、リストの項目は自分の特徴と状態を維持したいです。このような内容を入力してください。
データが変更されてレンダリング層の再レンダリングをトリガすると、keyを有するコンポーネントが修正され、フレームワークは、コンポーネントが自身の状態を維持し、リストレンダリングを向上させるために再作成されるのではなく、彼らが再作成されることを確実にする。
key値の注意点：
key値は、唯一の行を有する必要があり、動的に変更することができない。
keyの値は数字または文字列でなければなりません。
キー*thisを保持することは、forサイクルにおけるitem自体を表し、key値としても機能するが、以下の制限があり、item自体が唯一の文字列または数字である必要がある。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

SpringBootとSwaggerを結合してAPIの開発効率を向上させます。

Spring Boot展開jarとwarの違いを詳しく説明します。