收藏
回答

根据条件动态生成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)
},

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

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

5 个回答

  • 老刘
    老刘
    2018-12-07

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


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


    2018-12-07
    赞同 2
    回复 2
    • ==
      ==
      2018-12-07

      兄弟你代码改的有点多啊

      2018-12-07
      回复
    • 老刘
      老刘
      2018-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>


      2018-12-07
      回复
  • ==
    ==
    2018-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>????肯定报错啊

    2018-12-07
    赞同 1
    回复 6
    • 老刘
      老刘
      2018-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>


      2018-12-07
      回复
    • ==
      ==
      2018-12-07回复老刘

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

      2018-12-07
      回复
    • ==
      ==
      2018-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>


      2018-12-07
      回复
    • 老刘
      老刘
      2018-12-07回复==

      显然不符合啊,TD在TR外了

      2018-12-07
      回复
    • ==
      ==
      2018-12-07回复老刘

      这个可以实现你上面的图片需求啊,,9个td为一组,9个tr一组

      2018-12-07
      回复
    查看更多(1)
  • 再见,电脑崽
    再见,电脑崽
    2018-12-07

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

    2018-12-07
    赞同 1
    回复 9
    • 老刘
      老刘
      2018-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>


      2018-12-07
      回复
    • 再见,电脑崽
      再见,电脑崽
      2018-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>


      2018-12-07
      1
      回复
    • 老刘
      老刘
      2018-12-07回复再见,电脑崽

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

      2018-12-07
      回复
    • 再见,电脑崽
      再见,电脑崽
      2018-12-07回复老刘



      https://developers.weixin.qq.com/s/bHFWBtmj7z4F  


      2018-12-07
      2
      回复
    • 再见,电脑崽
      再见,电脑崽
      2018-12-07回复老刘
      <view class='table'>
          <view wx:for='{{9}}' wx:key='index' class='section {{index % 2 == 1 ? "d" : ""}} {{index % 3 == 2 ? "right" : ""}} {{index >= 6 ? "bottom" : ""}}'>
              <view wx:for='{{3}}' wx:key='index' class='tr'>
                  <view wx: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: 4px solid #333;
          border-top: 4px solid #333;
      }
       
      .section {
          display: flex;
          border-right: 1px solid #333;
          border-bottom: 1px solid #333;
      }
       
      .section.right {
          border-right: 4px solid #333;
      }
       
      .section.bottom {
          border-bottom: 4px solid #333;
      }
       
      .section.d {
          background-color: #ccc;
      }
       
      .td {
          font-size: 11pt;
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-right: 1px solid #666;
          border-bottom: 1px solid #666;
          box-sizing: border-box;
      }


      so easy!~

      2018-12-07
      1
      回复
    查看更多(4)
  • 元旷
    元旷
    2018-12-07

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

    2018-12-07
    赞同
    回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    2018-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>


    2018-12-07
    赞同
    回复 3
    • 老刘
      老刘
      2018-12-07

      这样就达不成我的目标了

      2018-12-07
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      2018-12-07回复老刘

      那你是要啥效果

      2018-12-07
      回复
    • 老刘
      老刘
      2018-12-07回复仙森ღ₅₂₀¹³¹⁴

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

      2018-12-07
      回复