拖拽网页设计 第1篇
首先打开页面设计器:
通过敲击空格,来呼出物料面板,可以看到我们用来设计页面的组件。
通过在组件右上角鼠标悬浮,可以看到相应的提示信息,表示该组件的名称。
我们把页面中所有的元素都以行列的形式进行划分,也就是整个页面都是通过行列布局嵌套行列布局来组成的。
这也就是说任何一个元素都必须要处于一个行列布局里面。
然后我们就可以添加一个按钮试试:
添加完成之后,可以更改它的一些属性,比如颜色、圆角等等。
也可以添加多列,并放置不同的元素:
甚至可以为组件设置插槽:
我们还提供了便于操作的一些功能:
拖拽网页设计 第2篇
这样就生成了一个页面,并且可以拿来使用了。
但是它的功能远远不止这些,还有很多很多,我们来简单尝试其中的几个。
我们再加一点逻辑,比如想要按照热度进行排名。
那么我们可以在刚才的请求链接中配置上回调函数:
这里的data就表示接口返回的数据,可以理解为let data = 。
然后我们去刷新页面,看下效果:
发现已经设置成功了!
我们再在页面上添加一个按钮,用来重新获取接口刷新列表,并且简单的给它设置一点属性:
然后给按钮来添加一个事件:
我们把事件的代码写成如下所示:
拖拽网页设计 第3篇
我们重新来做一个列表,用来展示歌单。
首先,拖入一个表格到页面中:
歌单嘛,来给它添加几列,包含:歌曲名称、演唱人、时长、热度。
给表格的默认插槽添加要展示的四列,可以发现添加的时候,表格列式高亮显示的,这说明表格默认插槽中最适合插入表格列。
表格画完了,也就是我们的数据视图搞定了,那么接下来我们配置数据。