论坛 › 技术专版 › 微信小程序，列表的渲染

admin 发表于 2023-2-16 18:55:06

微信小程序，列表的渲染

<div id="article_content" class="article_content clearfix">
      <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
      <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
                <div id="content_views" class="htmledit_views">
                  <p></p>
<p>1.在列表中data:{}传数据</p>
<p>运算可以在{{}}写表达式&#xff0c;简单的运算&#xff0c;三元运算&#xff0c;逻辑判断等等。</p>
<p>{{ num &#61;&#61;&#61; 1 &#xff1f; '-' : 0 }}</p>
<p>{{num &#43; 3}}</p>
<p>{{msg &#43; ' '&#43;obj.name}}</p>
<p>条件渲染</p>
<pre><code><view wx:if&#61;&#34;{{view &#61;&#61; 'WEBVIEW'}}&#34;> WEBVIEW </view>
<view wx:elif&#61;&#34;{{view &#61;&#61; 'APP'}}&#34;> APP </view>
<view wx:else&#61;&#34;{{view &#61;&#61; 'MINA'}}&#34;> MINA </view></code></pre>
<p>列表的渲染</p>
<p>定义列表选项</p>
<pre><code>persons:[

        {

            id:1,

            name:'Tom',

            age:11

        },
      {
            id:2,
            name:'TOMONE',
            age:25
      },
      {
            id:3,
            name:'apple',
            age:24
      },

]</code></pre>
<p></p>
<p> </p>
<p>使用for进行循环数据</p>
<blockquote>
<p><view wx:for&#61;&#34;{{persons}}&#34;  wx:for-item&#61;&#34;item&#34; wx:for-index&#61;&#34;index&#34;></p>
<p><view>索引&#xff1a;{{index}}</view></p>
<p><view>姓名&#xff1a;{{item.name}}</view></p>
<p></view></p>
</blockquote>
<p><span style="color:#fe2c24;">注&#xff1a;遍历数组的时候</span></p>
<p><span style="color:#fe2c24;">在遍历数组的时候遍历item</span></p>
<p><span style="color:#fe2c24;">在遍历对象的时候&#xff0c;是遍历key和val</span></p>
<p>在遍历字符串的时候会对字符串进行拆解</p>
<p></p>
<blockquote>
<p><view wx:for&#61;&#34;array&#34;></p>
<p>{{item}}</p>
<p></view></p>
</blockquote>
<p>最后输出</p>
<p>a</p>
<p>r</p>
<p>r</p>
<p>a</p>
<p>y</p>
<p>最后会进行分解输出</p>
<p></p>
<p></p>
<p></p>
                </div>
      </div>
      <div id="treeSkill"></div>

查看完整版本: 微信小程序，列表的渲染