[已解决]微信小程序页面布局代码如何改进为循环渲染

@xmz

<view class="content">
    <view class="screen">
        {{screenData}}
    </view>
  <view  class="btnGroup">
    <view class="item orange" bindtap="clickButton" id="{{id1}}">退格</view>
    <view class="item orange" bindtap="clickButton"  id="{{id2}}">清屏</view>
    <view class="item orange" bindtap="clickButton"  id="{{id3}}">+/-</view>
    <view class="item orange" bindtap="clickButton"  id="{{id4}}">+</view>
  </view>

  <view  class="btnGroup">
    <view class="item blue" bindtap="clickButton"  id="{{id5}}">9</view>
    <view class="item blue" bindtap="clickButton"  id="{{id6}}">8</view>
    <view class="item blue" bindtap="clickButton"  id="{{id7}}">7</view>
    <view class="item orange" bindtap="clickButton"  id="{{id8}}">-</view>
  </view>

  <view  class="btnGroup">
    <view class="item blue" bindtap="clickButton"  id="{{id9}}">6</view>
    <view class="item blue" bindtap="clickButton"  id="{{id10}}">5</view>
    <view class="item blue" bindtap="clickButton"  id="{{id11}}">4</view>
    <view class="item orange" bindtap="clickButton"  id="{{id12}}">×</view>
  </view>
  
  <view  class="btnGroup">
    <view class="item blue" bindtap="clickButton"  id="{{id13}}">3</view>
    <view class="item blue" bindtap="clickButton"  id="{{id14}}">2</view>
    <view class="item blue" bindtap="clickButton"  id="{{id15}}">1</view>
    <view class="item orange" bindtap="clickButton"  id="{{id16}}">÷</view>
  </view>
  
  <view  class="btnGroup">
    <view class="item blue" bindtap="clickButton"  id="{{id17}}">0</view>
    <view class="item blue" bindtap="clickButton"  id="{{id18}}">.</view>
    <view class="item blue" bindtap="history"  id="{{id19}}">历史</view>
    <view class="item orange" bindtap="clickButton"  id="{{id20}}">=</view>
  </view>
</view>

最佳答案

月排行榜 / 总排行榜

不二如是

2023-6-30 16:20:17

可以这样对该代码进行优化:

1. 抽离计算器按钮的数据到一个数组中:

1. const buttons = [
   
2.   { id: id1, text: '退格' },
   
3.   { id: id2, text: '清屏' },
   
4.   // ...
   
5. ]

复制代码

2. 在data中定义这个数组:

1. data: {
   
2.   buttons: buttons
   
3. }

复制代码

3. 使用循环渲染按钮:

1. <view class="btnGroup">
   
2.   <view
   
3.     class="item orange"
   
4.     bindtap="clickButton"
   
5.     id="{{item.id}}"
   
6.     wx:for="{{buttons}}"
   
7.     wx:for-item="item"
   
8.   >
   
9.     {{item.text}}
   
10.   </view>
    
11. </view>

复制代码

4. 为了区分不同行的按钮,可以在buttons数组中增加一个type字段,表示颜色,然后在wx:for循环中通过这个字段设置class:

1. const buttons = [
   
2.   { id: id1, text: '退格', type: 'orange' },
   
3.   { id: id2, text: '清屏', type: 'orange' },
   
4.   // ...
   
5. ]
   
6. 
   
7. <view
   
8.   class="item {{item.type}}"
   
9.   bindtap="clickButton"
   
10.   id="{{item.id}}"
    
11.   wx:for="{{buttons}}"
    
12.   wx:for-item="item"
    
13. >
    
14.   {{item.text}}
    
15. </view>

复制代码

5. 可以把屏幕数据screenData也抽离到data中,通过变量渲染:

1. <view class="screen">
   
2.   {{screen}}
   
3. </view>

复制代码

1. data: {
   
2.   screen: ""
   
3. }

复制代码

这样,通过循环渲染和变量,可以使这个计算器代码更加结构清晰,维护更容易。
这是使用微信小程序进行优化和重构的一个很好的示例。可以运用的技巧有:

1. 数据抽离到数组
2. 循环渲染
3. 通过变量渲染
4. 添加分类字段,并在循环渲染中使用

跳转到最佳答案楼层

@xmz

这是计算器的微信小程序，想知道如何对其代码优化，实现循环渲染

不二如是

可以这样对该代码进行优化:

1. 抽离计算器按钮的数据到一个数组中:

1. const buttons = [
   
2.   { id: id1, text: '退格' },
   
3.   { id: id2, text: '清屏' },
   
4.   // ...
   
5. ]

复制代码

2. 在data中定义这个数组:

1. data: {
   
2.   buttons: buttons
   
3. }

复制代码

3. 使用循环渲染按钮:

1. <view class="btnGroup">
   
2.   <view
   
3.     class="item orange"
   
4.     bindtap="clickButton"
   
5.     id="{{item.id}}"
   
6.     wx:for="{{buttons}}"
   
7.     wx:for-item="item"
   
8.   >
   
9.     {{item.text}}
   
10.   </view>
    
11. </view>

复制代码

4. 为了区分不同行的按钮,可以在buttons数组中增加一个type字段,表示颜色,然后在wx:for循环中通过这个字段设置class:

1. const buttons = [
   
2.   { id: id1, text: '退格', type: 'orange' },
   
3.   { id: id2, text: '清屏', type: 'orange' },
   
4.   // ...
   
5. ]
   
6. 
   
7. <view
   
8.   class="item {{item.type}}"
   
9.   bindtap="clickButton"
   
10.   id="{{item.id}}"
    
11.   wx:for="{{buttons}}"
    
12.   wx:for-item="item"
    
13. >
    
14.   {{item.text}}
    
15. </view>

复制代码

5. 可以把屏幕数据screenData也抽离到data中,通过变量渲染:

1. <view class="screen">
   
2.   {{screen}}
   
3. </view>

复制代码

1. data: {
   
2.   screen: ""
   
3. }

复制代码

这样,通过循环渲染和变量,可以使这个计算器代码更加结构清晰,维护更容易。
这是使用微信小程序进行优化和重构的一个很好的示例。可以运用的技巧有:

1. 数据抽离到数组
2. 循环渲染
3. 通过变量渲染
4. 添加分类字段,并在循环渲染中使用