vue空调遥控器单键状态切换(uniapp实现)
要在页面上实现一个按键点击切换不同状态或模式
·
要在页面上实现一个按键点击切换不同状态或模式
操作如下,点击对应按键切换状态或模式
接口协议代码
// A 空调部分 par 的参数含义,在这里用的时候就需要是索引减一
// 1,开关: 0=开,1=关
// 2,模式: 0=自动 ,1=制冷, 2=除湿, 3=送风, 4=制热
// 3,温度: 16-30 度, 0=1, 14=30
// 4,风速: 0=自动,1=高 ,2=中 ,3=低
// 5,风向: 0=自动,1=高,2=中,3=低
// 6,键值: 0=开关,1=模式,2=温度,3=风速,4=风向。每一次操作需要传递这一项表示要进行什么操作
par: [1, 1, 4, 0, 0, 0],
定义三个按键的可用数组,这里由于协议中使用的就是从0开始顺序编号,所以可以直接用数组内字符串,而不用内嵌对象
// 这三项在控制序列中的下标索引分别位于1、4、3,即相应的序号减一
operMode: ["自动模式" ,"制冷模式", "除湿模式", "送风模式", "制热模式"], // 1
windDerection: ["自动","低","中","高"], // 4
windSpeed: ["自动","低","中","高"], // 3
定义通用处理方法
// 定义切换方法:index是当前案件在数组par中的索引位置、kLen是当前按键可选项的数组长度
switchMode(index, kLen) {
// 如果是要改变风向、风速、模式,那么根据各自的数组长度,进行一个轮询
if (++this.par[index] >= kLen) { // 如果到最后一位了,那么重置为0
this.par[index] = 0
}
this.par[5] = index+1 // 更改键值项,对应第六条,下标为5
// 发送数据请求
this.realPost()
this.$forceUpdate()
},
标签中进行使用,下面分别是操作模式、风向、风速
<view class="control-item device-data" slot="body">
<view class="data-item" @click="switchMode(1, operMode.length)">
<image src="/static/kt/operMode.png" class="contorl-icon" />
<view class="data-value">{{operMode[par[1]]}}</view>
</view>
<view class="data-item" @click="switchMode(4, windDerection.length)">
<image src="/static/kt/windDerection.png" class="contorl-icon" />
<view class="data-value">{{windDerection[par[4]]}}风向</view>
</view>
<view class="data-item" @click="switchMode(3, windSpeed.length)">
<image src="/static/kt/windSpeed.png" class="contorl-icon" />
<view class="data-value">{{windSpeed[par[3]]}}风速</view>
</view>
</view>
更多推荐
已为社区贡献2条内容
所有评论(0)