微信小程序页面布局代码如何改进为循环渲染
<view class="content"><view class="screen">
{{screenData}}
</view>
<viewclass="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>
<viewclass="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>
<viewclass="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>
<viewclass="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>
<viewclass="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:21 编辑
可以这样对该代码进行优化:
1. 抽离计算器按钮的数据到一个数组中:
const buttons = [
{ id: id1, text: '退格' },
{ id: id2, text: '清屏' },
// ...
]
2. 在data中定义这个数组:
data: {
buttons: buttons
}
3. 使用循环渲染按钮:
<view class="btnGroup">
<view
class="item orange"
bindtap="clickButton"
id="{{item.id}}"
wx:for="{{buttons}}"
wx:for-item="item"
>
{{item.text}}
</view>
</view>
4. 为了区分不同行的按钮,可以在buttons数组中增加一个type字段,表示颜色,然后在wx:for循环中通过这个字段设置class:
const buttons = [
{ id: id1, text: '退格', type: 'orange' },
{ id: id2, text: '清屏', type: 'orange' },
// ...
]
<view
class="item {{item.type}}"
bindtap="clickButton"
id="{{item.id}}"
wx:for="{{buttons}}"
wx:for-item="item"
>
{{item.text}}
</view>
5. 可以把屏幕数据screenData也抽离到data中,通过变量渲染:
<view class="screen">
{{screen}}
</view>
data: {
screen: ""
}
这样,通过循环渲染和变量,可以使这个计算器代码更加结构清晰,维护更容易。
这是使用微信小程序进行优化和重构的一个很好的示例。可以运用的技巧有:
1. 数据抽离到数组
2. 循环渲染
3. 通过变量渲染
4. 添加分类字段,并在循环渲染中使用
页:
[1]