陈嘉祺 發表於 2020-10-19 23:16:00

[FE] uni-app Grid 宫格组件 uni-grid 用法

<p><img src="https://img2020.cnblogs.com/blog/598639/202106/598639-20210602014748656-2054077387.jpg"></p>
<p>&nbsp;</p>
<p>文档上的描述是比较简陋的,不明所以。</p>
<p>&nbsp;</p>
<p>核心就是两块内容,一个是 uni-grid 可以加 change 事件;另一个是 uni-grid-item 上面 index 属性值会作为 change 指定函数的参数一部分返回,格式是&nbsp;{detail:{index:0}}</p>
<p>&nbsp;</p>
<p>举例,局部代码如下:</p>
<div class="cnblogs_code">
<pre>&lt;uni-grid :column="3" @change="gridClicked"&gt;
    &lt;uni-grid-item v-<span style="color: rgba(0, 0, 255, 1)">for</span>="item in list" :index="item.id"&gt;
      &lt;text class="text"&gt;{{ item.name }}&lt;/text&gt;
    &lt;/uni-grid-item&gt;
&lt;/uni-grid&gt;

&lt;script&gt;<span style="color: rgba(0, 0, 0, 1)">
    methods: {
       gridClicked (e) {
            console.log(e)
       }
   }
</span>&lt;/script&gt;</pre>
</div>
<p>&nbsp;</p>
<p>Refer:uni-app官方组件</p>
<p>Doc:https://ext.dcloud.net.cn/plugin?id=27</p>
<p>Link:https://www.cnblogs.com/farwish/p/13843893.html</p><br><br>
来源:https://www.cnblogs.com/farwish/p/13843893.html
頁: [1]
查看完整版本: [FE] uni-app Grid 宫格组件 uni-grid 用法