上一节我们完成了科目导航页的开发,本节我们开发一下教师列表页。
1、组件搭建
登录低码控制台,打开应用,切换到教师列表页
先往里放置一个滚动容器
切换到样式页签,我们增加如下样式
width: 90%;
height: 1200px;
margin-top: 20px;
margin-right: 5%;
margin-left: 5%;
padding: 16px;
border-radius: 10px;
background: rgb(255, 255, 255)
目的是为了让滚动容器的上边、左边和右边都有一定的间距,边框有个圆角的效果,并且有个默认的高度好显示内容
然后在滚动容器里放置一个普通容器用来显示教师的具体信息
我们在普通容器里添加一个普通容器和分割线,这样可以让信息有一个区分
我们给里边的普通容器增加如下的样式
margin-top: 30px;
display: flex
距上边有30像素的距离,布局的话选择flex布局
接着就是我们的教师的信息展示部分了,我们分为左右结构,左边展示教师的头像,右边显示具体的信息,所以往里边先添加两个普通容器
左边的容器里增加图片组件
给图片组件设置如下样式
width: 128px;
height: 128px;
border-radius: 50%
这样我们就让图片变成圆形了
在右边的容器放置两个普通容器,用来显示具体的文本信息
具体放置好的效果如下:
2、变量定义
我们组件搭建好后需要将具体的内容替换成数据库里的内容,为此我们需要定义一个变量,点击导航条的变量
变量的类型选择模型变量,选择我们的教师的数据源
3、变量绑定
变量定义好后就需要绑定变量,因为是一个列表,代表着记录会循环展示,所以需要在父容器上绑定变量
绑定我们刚才定义的变量
然后将图片绑定对应的变量
文本替换成真实的字段,需要注意的是文本绑定的时候如果是组合的,比如我要显示科目:英语这种的,科目是固定的字符,英语是从数据库中获取的,就需要使用表达式绑定
`科目:${forItems.id2.kmlb}`
这里会自动进行变量替换,替换后的效果
这样我们就把教师列表页开发好了。后续我们继续开发教师详情页
联系客服