前端代码
<block wx:for='{{sudoku}}' wx:key='*this'> <block wx:if='{{index%9==0}}'> <view class='tr'> </block> <!--other codes here--> <block wx:if='{{index%9==0}}'> </view> </block> </block> |
js代码：
data: { sudoku: new Array(81)}, |
但这样报错，该如何实现类似功能？效果希望是这样的
我最后放弃了，改成如下代码方式了：
<viewclass='table'><blockwx:for='{{sudoku}}'wx:key='*this'><blockwx:if='{{index%9==0}}'><viewclass='tr line{{index/9 + 1}}'><viewclass='td col1 {{(index/9==0||index/9==1 || index/9==2 || index/9==6 ||index/9==7 || index/9==8)?"":"tdbg"}} {{cellSelected==index?"cell-selected":"cell"}}'data-cell='{{index}}'bindtap='onCellClick'>0</view><viewclass='td col2 {{(index/9==0||index/9==1 || index/9==2 || index/9==6 ||index/9==7 || index/9==8)?"":"tdbg"}} {{cellSelected==index+1?"cell-selected":"cell"}}'data-cell='{{index+1}}'bindtap='onCellClick'>0</view><viewclass='td col3 {{(index/9==0||index/9==1 || index/9==2 || index/9==6 ||index/9==7 || index/9==8)?"":"tdbg"}} {{cellSelected==index+2?"cell-selected":"cell"}}'data-cell='{{index+2}}'bindtap='onCellClick'>0</view><viewclass='td col4 {{(index/9==3||index/9==4 || index/9==5)?"":"tdbg"}} {{cellSelected==index+3?"cell-selected":"cell"}}'data-cell='{{index+3}}'bindtap='onCellClick'>0</view><viewclass='td col5 {{(index/9==3||index/9==4 || index/9==5)?"":"tdbg"}} {{cellSelected==index+4?"cell-selected":"cell"}}'data-cell='{{index+4}}'bindtap='onCellClick'>0</view><viewclass='td col6 {{(index/9==3||index/9==4 || index/9==5)?"":"tdbg"}} {{cellSelected==index+5?"cell-selected":"cell"}}'data-cell='{{index+5}}'bindtap='onCellClick'>0</view><viewclass='td col7 {{(index/9==0||index/9==1 || index/9==2 || index/9==6 ||index/9==7 || index/9==8)?"":"tdbg"}} {{cellSelected==index+6?"cell-selected":"cell"}}'data-cell='{{index+6}}'bindtap='onCellClick'>0</view><viewclass='td col8 {{(index/9==0||index/9==1 || index/9==2 || index/9==6 ||index/9==7 || index/9==8)?"":"tdbg"}} {{cellSelected==index+7?"cell-selected":"cell"}}'data-cell='{{index+7}}'bindtap='onCellClick'>0</view><viewclass='td col9 {{(index/9==0||index/9==1 || index/9==2 || index/9==6 ||index/9==7 || index/9==8)?"":"tdbg"}} {{cellSelected==index+8?"cell-selected":"cell"}}'data-cell='{{index+8}}'bindtap='onCellClick'>0</view></view></block></block></view>兄弟你代码改的有点多啊
提问是简化了问题。好吧，最终效果再简化下吧，这样看起来是不是舒服多了？呵呵
<viewclass='table'><blockwx:for='{{sudoku}}'wx:key='*this'><blockwx:if='{{index%9=={{index}}}}'><viewclass='tr line{{index/9 + 1}}'><viewclass='td col1'>{{index}}</view><viewclass='td col2'>{{index}}</view><viewclass='td col3'>{{index}}</view><viewclass='td col4'>{{index}}</view><viewclass='td col5'>{{index}}</view><viewclass='td col6'>{{index}}</view><viewclass='td col7'>{{index}}</view><viewclass='td col8'>{{index}}</view><viewclass='td col9'>{{index}}</view></view></block></block></view><blockwx:if='{{index%9==0}}'><viewclass='tr'></block><!--other codes here--><blockwx:if='{{index%9==0}}'></view></block>你这个是啥操作？？？一个if头部<view> 一个if尾部的</view>????肯定报错啊
为了分组啊，每9个分一行。期望是：
<blockwx:for='{{sudoku}}'wx:key='*this'><blockwx:if='{{index%9==0}}'><viewclass='tr'></block><viewclass='td'>'{{index}}</view><blockwx:if='{{index%9==0}}'></view></block></block>老刘，你看这个符不符合？？，，
<block wx:for='{{sudoku}}' wx:key='*this'>
<view class='tr' wx:if='{{ index > 9 && index<18 || index >27 && index<36}}'>
<view class='td'>{{index}}</view>
</view>
<view class='td' wx:else>{{index}}</view>
</block>
显然不符合啊，TD在TR外了
这个可以实现你上面的图片需求啊，，9个td为一组，9个tr一组
两个if条件一模一样，你为什么要把view拆开。
为了在中间插入其他元素啊，目的是为了这个
<blockwx:for='{{sudoku}}'wx:key='*this'><blockwx:if='{{index%9==0}}'><viewclass='tr'></block><viewclass='td'>'{{index}}</view><blockwx:if='{{index%9==0}}'></view></block></block><block wx:for='{{sudoku}}'wx:key='*this'><view class='tr'wx:if='{{index%9==0}}'><view class='td'>{{index}}</view></view><view class='td'wx:else>{{index}}</view></block>你这样，TR中只套了一个TD哦...
https://developers.weixin.qq.com/s/bHFWBtmj7z4F
<viewclass='table'><viewwx:for='{{9}}'wx:key='index'class='section {{index % 2 == 1 ? "d" : ""}} {{index % 3 == 2 ? "right" : ""}} {{index >= 6 ? "bottom" : ""}}'><viewwx:for='{{3}}'wx:key='index'class='tr'><viewwx:for='{{3}}'wx:key='index'class='td'>0</view></view></view></view>.table {margin-left:20px;margin-top:20px;width:276px;/*每个小元素30x9=270+section的外边宽度*/display: flex;flex-wrap: wrap;border-left:4pxsolid#333;border-top:4pxsolid#333;}.section {display: flex;border-right:1pxsolid#333;border-bottom:1pxsolid#333;}.section.right{border-right:4pxsolid#333;}.section.bottom{border-bottom:4pxsolid#333;}.section.d {background-color:#ccc;}.td {font-size:11pt;width:30px;height:30px;text-align:center;line-height:30px;border-right:1pxsolid#666;border-bottom:1pxsolid#666;box-sizing: border-box;}so easy！~
换个思路的话，我会考虑把sudoku转化为二维数组，然后双重遍历，不知道是不是适用
<blockwx:for='{{sudoku}}'wx:key='*this'><blockwx:if='{{index%9==0}}'><viewclass='tr'></view></block><!--other codes here--><blockwx:else><viewclass='tr'></view></block></block>这样就达不成我的目标了
那你是要啥效果
自己看截图。不过，谢谢回复。我自己也算解决了。另外，你看看【再见，电脑崽】的回复就明白了