1、拖动元件库里面的矩形到画布，更改画布大小（具体自己打开腾讯课堂，开发者模式，看看前端样式），作为导航背景，并命名为导航背景（命名最好根据公司要求views层命名规范命名，这里演示直接用汉字）。然后到样式中选择填充，填充色选择RGB（250 250 250）（网页颜色采集方式很多，这里说个最简单的，QQ截图时可看到鼠标所在位置的rgb)。
image.png
3、拖放一矩形至画布，更改大小颜色参考1，拖放至导航栏右边，双击输入返回旧版，命名为“返回旧版”，页面为这样。
image.png
4、拖放一矩形至画布，更改大小颜色参考1，输入我要讲课，拖入两个水平线，转动方向组合成单角符，并命名为“单角符”（ps:我这里是有元件库，建议去网上收集一些基础形状的元件库，可以节省很多时间）放入我要听课右边，设置好尺寸后，设置交互。点击我要听课矩形，在右边交互中选择鼠标移入时、旋转、单角符、选择到达、180度、方向顺时针、锚点中心、动画线性、时间250毫秒。确定后。设置鼠标移出时，反着来即可，可按F5查看效果。
image.png
image.png
5、拖放一矩形至画布，设置长宽后拖至我要讲课矩形下面，用基础元件库中的文本标签输入“教育机构开课”“个人老师开课”，然后设置两者的选中状态，为字体蓝色，同时设置我要开课矩形选中状态为背景颜色白色。设置教育机构开课鼠标移入时交互，为选中此元件，移出时交互为取消选中，同理设置个人开课交互与我要讲课交互。
image.png
image.png
image.png
6、将第5步中的矩形和“教育机构开课”“个人老师开课”同时选中并组合，命名为我要开课子列表，选择隐藏。设置我要讲课的鼠标移入时，显示我要开课子列表，动画效果为弹出。
image.png
。
image.png
7、基于以上可做出手机学习下拉，手机学习里面二维码自己可随意换成别的图片，原理一样。
效果为：
image.png
8、登录同上
image.png
9、搜索框制作，蓝色背景矩形和白色背景矩形两个，在白色矩形上拖入动态面板，命名为搜索框，动态面板双击进入编辑页面，增加一页。在动态面板的两个State中分别拖入文本框，文本框边框取消，提示样式填写，选择获取焦点。
image.png
选择框则需要两个动态面板，分上下布置，命名为上为1，下为2，上面的动态面板设置两个state，下面动态面板为三个，其中一个为空白。交互的原理是，1默认课程，对课程设置点击交互，2面板切位机构；对2面板机构做点击交互，1面板切位机构同时2面板切位state3（此为空白）同时搜索框动态面板切为搜索机构；1面板机构设置点击交互，2面板切为课程；对2面板课程做交互，1面板切为课程同时2面板切为state3同时搜索框动态面板切为搜索课程......此处两个面板state1为课程，state2为机构。这个有点弯弯绕绕，我要是一步一步写和截图就太麻烦了，就这么写了，还有系统自带下拉列表框元件，只是不好调样式（我木找到调的地方）。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。表达能力欠佳。。。。
image.png
10、不小心切到旧版腾讯课堂上去了，而且切不回新版了，那就先按照旧版做了。。。。。。还有为什么预览有些图片有问题，不懂啊！
网友评论