EA&UML日拱一卒-微信小程序实战：位置闹铃 (8)-WXML条件渲染

需求

按照位置闹铃程序的设计，当设备接近或者离开某个区域时，可以播放提示音，也可触发记时器动作。按照设计，我们的画面是这样的。
提示音选择画面



计时器选择画面



实现方式
一般来讲，根据动作动作类型选择后续设定内容有两种方式，一种是控件本身不切换，修改控件的内容；另一种是根据需求切换控件的表示和非表示。这里我们采用第二种方式。
editaction.wxml
WXML提供了一种条件渲染的方法，这种方法可以根据条件变量来决定控件是否显示。在编辑动作画面中是这样应用的。
<view wx:if="{{action_index>0}}">       <picker  bindchange="bindTimerChange" value="{{timer_index}}" range="{{timer_array}}">         <view class="picker">           定时器：{{timer_array[timer_index]}}         </view>       </picker>   </view>   <view wx:else>       <picker  bindchange="bindMediaChange" value="{{media_index}}" range="{{media_array}}">           <view class="picker">            提示音：{{media_array[media_index]}}           </view>       </picker>   </view>
这里使用的是wx:if和wx:else关键词，结构和其他语言中的if/else比较相似。具体的条件就是看action_index是否大于0。

editacion.js
action_index的值是在editaction.jsz中处理的。逻辑非常简单。
首先，动作类型的选择肢如下：
action_array: ['播放提示音', '启动定时器', '停止定时器', '暂停定时器', '再开定时器'],
当用户选择动作类型时就会触发下面的处理。
bindActionTypeChange: function (e) {   console.log('editaction.js::bindActionTypeChange: ' + e.detail.value)   this.setData({     action_index: e.detail.value   }) },
如果选择的动作类型为播放提示音，则action_index就为0，选择其他设定计时器选项时action_index的值就会大于0。通过setData修改action_index的值以后，画面上的组件就会相应的显示和隐藏。
小程序代码
最新代码已经将代码上传到GitHub。
工程全体： https://github.com/xueweiguo/alarmmap editaction.wxml https://raw.githubusercontent.com/xueweiguo/alarmmap/master/pages/editaction/editaction.wxml editaction.jshttps://raw.githubusercontent.com/xueweiguo/alarmmap/master/pages/editaction/editaction.js

写在文章的最后

既然已经读到这里了，拜托大家再用一分钟时间，将文章转发到各位的朋友圈，微信群中。本公众号的成长需要您的支持！以上就是今天的文章，欢迎点赞并推荐给您的朋友！
阅读更多更新文章，请扫描下面二维码，关注微信公众号【面向对象思考】