微信小程序-组件按下变化小案例的学习

教程地址:https://study.163.com/course/courseLearn.htm?courseId=1209639804#/learn/video?lessonId=1280167071&courseId=1209639804

创建一个项目

这里我到资源管理器把文件全删了,不使用模板,从头创建
这里sitemap.json是作为小程序收录检索
project.config.json是配置文件,这两个文件保留

创建一个app.json
这个是小程序的入口
再创建一个pages文件夹,这里将存放页面资源

接下来要写app.json
具体规则是一个字典,先一个大括号,
里面输入pages,使用快速补全,会自动帮你把架构创建出来


这里要注意字典下,我们pages下面暂时没有其他键值对需要先把逗号去掉,不然会报错
再Entrance这里输入页面路径,按ctrl+s 保存,系统会自动创建页面结构

01-test的界面就被显示出来了
进入01-test.wxml修改页面



再进入wxss修改样式


这里margin是设置页边的空白,里面的auto是对剩余空间自动分配,所以水平就居中了,垂直不居中的原因是因为垂直没有固定的大小,无法分配.

变化

接下来,我们实现点击变化
我们先看下view组件的文档

找到hovel-class属性,我们可以用它来在按下生成一个类,对类进行样式定义



接下来,继续完善下样式

如果样式不知道怎么使用或用哪个参数值,可以鼠标停留在属性上,会跳出提示信息,还可以点击详情


现在要让它有变化的过渡,我们只需要添加transiton属性
一开始我是添加在hover类上,发现松开后没有过渡
后来发现松开后类就消失了,所以状态就没了,所以应该加在基础类上