Uni-app实战知识付费系统-课程分类页面开发

你要明白，世上最牢靠的肩膀与双手，长在你自己身上，越努力越幸运！

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程序员的个人博客系统​​​​​​​