根据条件动态生成wxml元素的问题

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小程序 Bug 工具 6.5.3 2.4.0

前端代码

  <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)
},

但这样报错,该如何实现类似功能?效果希望是这样的

最后一次编辑于  12-07  (未经腾讯允许,不得转载)
收藏 0评论 0
关注问题写回答

5 个回答

  • 老刘老刘

    我最后放弃了,改成如下代码方式了:


    <view class='table'>
      <block wx:for='{{sudoku}}' wx:key='*this'>
        <block wx:if='{{index%9==0}}'>
          <view class='tr line{{index/9 + 1}}'>
            <view class='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>
            <view class='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>
            <view class='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>
            <view class='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>
            <view class='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>
            <view class='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>
            <view class='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>
            <view class='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>
            <view class='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>


    赞同 2没有帮助
    评论 2
    复制
    12-07
    • 左尘左尘

      兄弟你代码改的有点多啊

      赞同 0没有帮助
      回复
      复制
      12-07
    • 老刘老刘
      回复左尘

      提问是简化了问题。好吧,最终效果再简化下吧,这样看起来是不是舒服多了?呵呵

      <view class='table'>
        <block wx:for='{{sudoku}}' wx:key='*this'>
          <block wx:if='{{index%9=={{index}}}}'>
            <view class='tr line{{index/9 + 1}}'>
              <view class='td col1'>{{index}}</view>
              <view class='td col2'>{{index}}</view>
              <view class='td col3'>{{index}}</view>
              <view class='td col4'>{{index}}</view>
              <view class='td col5'>{{index}}</view>
              <view class='td col6'>{{index}}</view>
              <view class='td col7'>{{index}}</view>
              <view class='td col8'>{{index}}</view>
              <view class='td col9'>{{index}}</view>
            </view>
          </block>
        </block>
      </view>


      赞同 0没有帮助
      回复
      复制
      12-07
    评论
  • 左尘左尘

        <block wx:if='{{index%9==0}}'>

          <view class='tr'>

        </block>

        <!--other codes here-->

        <block wx:if='{{index%9==0}}'>

          </view>

        </block>

    你这个是啥操作???一个if头部<view>    一个if尾部的</view>????肯定报错啊

    赞同 1没有帮助
    评论 6
    复制
    12-07
    • 老刘老刘

      为了分组啊,每9个分一行。期望是:

      <block wx:for='{{sudoku}}' wx:key='*this'>
        <block wx:if='{{index%9==0}}'>
          <view class='tr'>
        </block>
        <view class='td'>'{{index}}</view>
        <block wx:if='{{index%9==0}}'>
          </view>
        </block>
      </block>


      赞同 0没有帮助
      回复
      复制
      12-07
    • 左尘左尘
      回复老刘

      老刘,你看这个符不符合??,,

      赞同 0没有帮助
      回复
      复制
      12-07
    • 左尘左尘
      回复老刘

      <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>


      赞同 0没有帮助
      回复
      复制
      12-07
    • 展示更多
    评论
  • 再见,电脑崽再见,电脑崽

    两个if条件一模一样,你为什么要把view拆开。

    赞同 1没有帮助
    评论 9
    复制
    12-07
    • 老刘老刘

      为了在中间插入其他元素啊,目的是为了这个

      <block wx:for='{{sudoku}}' wx:key='*this'>
        <block wx:if='{{index%9==0}}'>
          <view class='tr'>
        </block>
        <view class='td'>'{{index}}</view>
        <block wx:if='{{index%9==0}}'>
          </view>
        </block>
      </block>


      赞同 0没有帮助
      回复
      复制
      12-07
    • 再见,电脑崽再见,电脑崽
      回复老刘
      <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>


      赞同 1没有帮助
      回复
      复制
      12-07
    • 老刘老刘
      回复再见,电脑崽

      你这样,TR中只套了一个TD哦...

      赞同 0没有帮助
      回复
      复制
      12-07
    • 展示更多
    评论
  • 元旷元旷

    换个思路的话,我会考虑把sudoku转化为二维数组,然后双重遍历,不知道是不是适用

    赞同 0没有帮助
    评论 0
    复制
    12-07
  • 闵仙森ༀ闵仙森ༀ
    <block wx:for='{{sudoku}}' wx:key='*this'>
        <block wx:if='{{index%9==0}}'>
          <view class='tr'></view>
        </block>
        <!--other codes here-->
        <block wx:else>
          <view class='tr'></view>
        </block>
    </block>


    赞同 0没有帮助
    评论 3
    复制
    12-07
    • 老刘老刘

      这样就达不成我的目标了

      赞同 0没有帮助
      回复
      复制
      12-07
    • 闵仙森ༀ闵仙森ༀ
      回复老刘

      那你是要啥效果

      赞同 0没有帮助
      回复
      复制
      12-07
    • 老刘老刘
      回复闵仙森ༀ

      自己看截图。不过,谢谢回复。我自己也算解决了。另外,你看看【再见,电脑崽】的回复就明白了

      赞同 0没有帮助
      回复
      复制
      12-07
    评论