0
点赞
收藏
分享

微信扫一扫

腾讯云微搭低代码餐饮小程序实例

凶猛的小白兔 2022-03-11 阅读 65

前言

我们在日常就餐的过程中,餐饮店经常会使用餐饮小程序来管理台位,来控制每桌的就餐或者空闲状态。一般是餐桌上进行扫码点餐,在PC端来控制收费。

本篇教程,我们就结合这个实际的业务场景,利用微搭低代码工具来实现对餐桌状态的一个管理。

实现的效果

我们页面上通过两个按钮来控制餐桌的状态,开台就让餐桌变成就餐的状态,并且设置一个红色的背景。点击闭台就让餐桌变成空闲的状态,并且设置一个绿色的背景。

在这里插入图片描述
在这里插入图片描述

实现的思路

要想控制餐桌的状态,可以通过一个布尔值变量来控制,通过变量的真假来显示餐桌的状态。

点击变量,创建一个布尔值类型的变量
在这里插入图片描述
至于颜色的话,我们可以定义一个object类型的变量,并且给赋予一个初始绿色的背景值
在这里插入图片描述
我们点击按钮的时候做颜色改变和状态改变,可以定义两个低码方法

export default function({event, data}) {
    $page.dataset.state.bg = {background:"red"}
    $page.dataset.state.flag = true
}

开餐的低码让背景色变成红色,并且状态置为true
在这里插入图片描述
闭餐我们让背景色设置为绿色,并且状态赋值为false

export default function({event, data}) {
 $page.dataset.state.bg = {background:"green"}
    $page.dataset.state.flag = false
}

在这里插入图片描述

组件开发及事件绑定

基础工作做好之后,我们就实现页面的效果,先放置一个普通容器,里边放置两个按钮

普通容器设置一下样式,让按钮在一行显示
在这里插入图片描述
然后给两个按钮分别绑定刚才定义好的开餐方法和闭餐方法
在这里插入图片描述
然后再放置一个普通容器,里边放置三个文本组件
在这里插入图片描述
第一个文本设置文本内容为餐桌的台号
在这里插入图片描述
第二个文本将文本内容设置为就餐中
在这里插入图片描述
我们设置一下条件显示,绑定为我们刚刚定义的变量flag
在这里插入图片描述
第三个文本设置为空闲中,条件展示使用表达式用来取反,这样就可以控制状态的切换了
在这里插入图片描述
在这里插入图片描述
在js里使用叹号表示取反的意思,我们这里flag是布尔类型,如果值为真取反之后就是假。如果值为假取反之后值就是真。就像电灯的开关一样,我们按下就是开灯,再按一下就是关灯。这里的逻辑也是和这个一样,通过变量的赋值来决定哪个文本组件显示。

最后一个效果就是背景色了,我们可以给普通容器设置一个样式变量,这样来控制颜色的变化。
在这里插入图片描述
在这里插入图片描述
一般我们的样式文件是这样的

.redbg{
	background:red
}
.greenbg{
	background:green
}

样式是通过类型选择器来定义,里边是属性的名称和属性的值,只不过样式的设置我们是在低代码里赋值完成的。这样就实现了我们最终的效果。

还在被样式动态设置困扰的小伙伴看看这一篇介绍吧,希望对你有一点帮助。

举报

相关推荐

0 条评论