你要明白,世上最牢靠的肩膀与双手,长在你自己身上,越努力越幸运!
hello 大家好,我是老张,没错还是那个励志于做一个全栈开发的老张,昨天断更了,因为要忙公司的工作,所以没有更新文章,喜欢老张的朋友可以点赞加关注,帮忙转发谢谢。
今天是中秋节,在这里老张向所有朋友问候一声,中秋节快乐。
正文
废话不多说进入正题,今天介绍下开发的分类界面,其实分类页面就是一个table 选项卡页面,根据后台返回的分类数据,进行渲染顶部分类,这个分类用的还是插件和首页一样,因为觉得方便便直接拿过来用了,下面的课程列表采用的是双排的一个结构,这个数据是动态根据上面的分类请求获取然后进行渲染,这个页面加载的有下拉加载拉取更多的一个课程,这样更方便用户浏览,采用了点击量排序,和后台手动排序两种权重排序的方法。
UI界面展示
顶部的分类可以进行点击获取后面的,点击到热点新闻后会自动向前获取下面的分类
页脚部分依旧采用的首页的部分
代码展示
<template>
<view class="page_edu">
<view class="page_content">
<view class="page_content_table">
<liuyuno-tabs :config="defaultConfig" :tabData="tabs" />
</view>
<view class="WhatclssContent">
<view class="course">
<view class="course-bottom">
<view class="course-bottom-list" >
<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
<text>课程标题</text>
<text>共4课时<text>|</text>2222人已学</text>
<view class="mask">专栏</view>
</view>
<view class="course-bottom-list" >
<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
<text>课程标题</text>
<text>共4课时<text>|</text>2222人已学</text>
<view class="mask">专栏</view>
</view>
<view class="course-bottom-list" >
<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
<text>课程标题</text>
<text>共4课时<text>|</text>2222人已学</text>
<view class="mask">专栏</view>
</view>
<view class="course-bottom-list" >
<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
<text>课程标题</text>
<text>共4课时<text>|</text>2222人已学</text>
<view class="mask">专栏</view>
</view>
<view class="course-bottom-list" >
<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
<text>课程标题</text>
<text>共4课时<text>|</text>2222人已学</text>
<view class="mask">专栏</view>
</view>
</view>
</view>
</view>
<view class="page_footer">
<tui-footer copyright="Copyright ? 2021-2019 乐而学之" :navigate="navigate"></tui-footer>
</view>
</view>
</view>
</template>
总结
开发这个页面呢,并没有浪费多久的时间,主要是在写并排样式的时候费劲了一些,因为之前的css基础比较弱,所以导致进度比价慢,最后使用了display: flex; 这个属性可以并排flex-wrap: wrap;使用flex 布局开发这个.目前进入开发的第二天.主体的界面,大概明天可以完成,学习界面和我的个人中心,主界面开发完成之后开始开发剩下的小页面了,加油老张
我的个人博客地址欢迎大家访问:张工个人博客一个PHP程序员的个人博客系统???????
|