<view class="pieces">
<view class="row">
<view class="piece" @tap="pieceClick" data-index="0">
<image class="p" :src="p[0]"></image>
<image class="n" :src="n[0]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="1">
<image class="p" :src="p[1]"></image>
<image class="n" :src="n[1]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="2">
<image class="p" :src="p[2]"></image>
<image class="n" :src="n[2]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="3">
<image class="p" :src="p[3]"></image>
<image class="n" :src="n[3]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="4">
<image class="p" :src="p[4]"></image>
<image class="n" :src="n[4]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="5">
<image class="p" :src="p[5]"></image>
<image class="n" :src="n[5]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="6">
<image class="p" :src="p[6]"></image>
<image class="n" :src="n[6]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="7">
<image class="p" :src="p[7]"></image>
<image class="n" :src="n[7]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="8">
<image class="p" :src="p[8]"></image>
<image class="n" :src="n[8]"></image>
</view>
</view>
<view class="row">
<view class="piece" @tap="pieceClick" data-index="9">
<image class="p" :src="p[9]"></image>
<image class="n" :src="n[9]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="10">
<image class="p" :src="p[10]"></image>
<image class="n" :src="n[10]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="11">
<image class="p" :src="p[11]"></image>
<image class="n" :src="n[11]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="12">
<image class="p" :src="p[12]"></image>
<image class="n" :src="n[12]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="13">
<image class="p" :src="p[13]"></image>
<image class="n" :src="n[13]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="14">
<image class="p" :src="p[14]"></image>
<image class="n" :src="n[14]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="15">
<image class="p" :src="p[15]"></image>
<image class="n" :src="n[15]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="16">
<image class="p" :src="p[16]"></image>
<image class="n" :src="n[16]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="17">
<image class="p" :src="p[17]"></image>
<image class="n" :src="n[17]"></image>
</view>
</view>
<view class="row">
<view class="piece" @tap="pieceClick" data-index="18">
<image class="p" :src="p[18]"></image>
<image class="n" :src="n[18]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="19">
<image class="p" :src="p[19]"></image>
<image class="n" :src="n[19]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="20">
<image class="p" :src="p[20]"></image>
<image class="n" :src="n[20]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="21">
<image class="p" :src="p[21]"></image>
<image class="n" :src="n[21]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="22">
<image class="p" :src="p[22]"></image>
<image class="n" :src="n[22]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="23">
<image class="p" :src="p[23]"></image>
<image class="n" :src="n[23]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="24">
<image class="p" :src="p[24]"></image>
<image class="n" :src="n[24]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="25">
<image class="p" :src="p[25]"></image>
<image class="n" :src="n[25]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="26">
<image class="p" :src="p[26]"></image>
<image class="n" :src="n[26]"></image>
</view>
</view>
<view class="row">
<view class="piece" @tap="pieceClick" data-index="27">
<image class="p" :src="p[27]"></image>
<image class="n" :src="n[27]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="28">
<image class="p" :src="p[28]"></image>
<image class="n" :src="n[28]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="29">
<image class="p" :src="p[29]"></image>
<image class="n" :src="n[29]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="30">
<image class="p" :src="p[30]"></image>
<image class="n" :src="n[30]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="31">
<image class="p" :src="p[31]"></image>
<image class="n" :src="n[31]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="32">
<image class="p" :src="p[32]"></image>
<image class="n" :src="n[32]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="33">
<image class="p" :src="p[33]"></image>
<image class="n" :src="n[33]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="34">
<image class="p" :src="p[34]"></image>
<image class="n" :src="n[34]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="35">
<image class="p" :src="p[35]"></image>
<image class="n" :src="n[35]"></image>
</view>
</view>
<view class="row">
<view class="piece" @tap="pieceClick" data-index="36">
<image class="p" :src="p[36]"></image>
<image class="n" :src="n[36]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="37">
<image class="p" :src="p[37]"></image>
<image class="n" :src="n[37]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="38">
<image class="p" :src="p[38]"></image>
<image class="n" :src="n[38]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="39">
<image class="p" :src="p[39]"></image>
<image class="n" :src="n[39]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="40">
<image class="p" :src="p[40]"></image>
<image class="n" :src="n[40]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="41">
<image class="p" :src="p[41]"></image>
<image class="n" :src="n[41]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="42">
<image class="p" :src="p[42]"></image>
<image class="n" :src="n[42]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="43">
<image class="p" :src="p[43]"></image>
<image class="n" :src="n[43]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="44">
<image class="p" :src="p[44]"></image>
<image class="n" :src="n[44]"></image>
</view>
</view>
<view class="row">
<view class="piece" @tap="pieceClick" data-index="45">
<image class="p" :src="p[45]"></image>
<image class="n" :src="n[45]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="46">
<image class="p" :src="p[46]"></image>
<image class="n" :src="n[46]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="47">
<image class="p" :src="p[47]"></image>
<image class="n" :src="n[47]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="48">
<image class="p" :src="p[48]"></image>
<image class="n" :src="n[48]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="49">
<image class="p" :src="p[49]"></image>
<image class="n" :src="n[49]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="50">
<image class="p" :src="p[50]"></image>
<image class="n" :src="n[50]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="51">
<image class="p" :src="p[51]"></image>
<image class="n" :src="n[51]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="52">
<image class="p" :src="p[52]"></image>
<image class="n" :src="n[52]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="53">
<image class="p" :src="p[53]"></image>
<image class="n" :src="n[53]"></image>
</view>
</view>
<view class="row">
<view class="piece" @tap="pieceClick" data-index="54">
<image class="p" :src="p[54]"></image>
<image class="n" :src="n[54]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="55">
<image class="p" :src="p[55]"></image>
<image class="n" :src="n[55]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="56">
<image class="p" :src="p[56]"></image>
<image class="n" :src="n[56]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="57">
<image class="p" :src="p[57]"></image>
<image class="n" :src="n[57]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="58">
<image class="p" :src="p[58]"></image>
<image class="n" :src="n[58]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="59">
<image class="p" :src="p[59]"></image>
<image class="n" :src="n[59]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="60">
<image class="p" :src="p[60]"></image>
<image class="n" :src="n[60]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="61">
<image class="p" :src="p[61]"></image>
<image class="n" :src="n[61]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="62">
<image class="p" :src="p[62]"></image>
<image class="n" :src="n[62]"></image>
</view>
</view>
<view class="row">
<view class="piece" @tap="pieceClick" data-index="63">
<image class="p" :src="p[63]"></image>
<image class="n" :src="n[63]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="64">
<image class="p" :src="p[64]"></image>
<image class="n" :src="n[64]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="65">
<image class="p" :src="p[65]"></image>
<image class="n" :src="n[65]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="66">
<image class="p" :src="p[66]"></image>
<image class="n" :src="n[66]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="67">
<image class="p" :src="p[67]"></image>
<image class="n" :src="n[67]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="68">
<image class="p" :src="p[68]"></image>
<image class="n" :src="n[68]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="69">
<image class="p" :src="p[69]"></image>
<image class="n" :src="n[69]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="70">
<image class="p" :src="p[70]"></image>
<image class="n" :src="n[70]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="71">
<image class="p" :src="p[71]"></image>
<image class="n" :src="n[71]"></image>
</view>
</view>
<view class="row">
<view class="piece" @tap="pieceClick" data-index="72">
<image class="p" :src="p[72]"></image>
<image class="n" :src="n[72]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="73">
<image class="p" :src="p[73]"></image>
<image class="n" :src="n[73]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="74">
<image class="p" :src="p[74]"></image>
<image class="n" :src="n[74]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="75">
<image class="p" :src="p[75]"></image>
<image class="n" :src="n[75]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="76">
<image class="p" :src="p[76]"></image>
<image class="n" :src="n[76]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="77">
<image class="p" :src="p[77]"></image>
<image class="n" :src="n[77]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="78">
<image class="p" :src="p[78]"></image>
<image class="n" :src="n[78]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="79">
<image class="p" :src="p[79]"></image>
<image class="n" :src="n[79]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="80">
<image class="p" :src="p[80]"></image>
<image class="n" :src="n[80]"></image>
</view>
</view>
<view class="row">
<view class="piece" @tap="pieceClick" data-index="81">
<image class="p" :src="p[81]"></image>
<image class="n" :src="n[81]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="82">
<image class="p" :src="p[82]"></image>
<image class="n" :src="n[82]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="83">
<image class="p" :src="p[83]"></image>
<image class="n" :src="n[83]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="84">
<image class="p" :src="p[84]"></image>
<image class="n" :src="n[84]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="85">
<image class="p" :src="p[85]"></image>
<image class="n" :src="n[85]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="86">
<image class="p" :src="p[86]"></image>
<image class="n" :src="n[86]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="87">
<image class="p" :src="p[87]"></image>
<image class="n" :src="n[87]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="88">
<image class="p" :src="p[88]"></image>
<image class="n" :src="n[88]"></image>
</view>
<view class="piece" @tap="pieceClick" data-index="89">
<image class="p" :src="p[89]"></image>
<image class="n" :src="n[89]"></image>
</view>
</view>
</view>代码就是这样，一个9x10的矩阵。
我试过用小程序的for循环来写，性能很差，每一次赋值整个列表都要重新渲染。这样把结构写死，性能就OK了。但是这代码也太长了，同时也不方便维护。怎么写比较简单啊？VUE里面用循环来写，编译出来的wxml就是最终写死的view这样的。
0 个回复