You should understand that the most reliable shoulders and hands in the world are on yourself. The harder you work, the luckier you are!

hello everyone, I'm Lao Zhang. Yes, it's Lao Zhang who is motivated to do a full stack development. He broke the watch yesterday. He didn't update the article because he had to be busy with the work of the company. Friends who like Lao Zhang can praise and pay attention to it and help forward it. Thank you.

Today is the Mid Autumn Festival. Here Lao Zhang greets all his friends. Happy Mid Autumn Festival.

text

No more nonsense, let's get to the point. Today we will introduce the developed classification interface. In fact, the classification page is a table tab page. According to the classification data returned from the background, the top classification is rendered. This classification uses the same plug-in as the home page. It is convenient to take it directly. The following course list adopts a double row structure, This data is dynamically obtained according to the above classification request and then rendered. This page is loaded with drop-down loading to pull more courses, which is more convenient for users to browse. Two weight sorting methods, click through sorting and background manual sorting, are adopted.

UI interface display

You can click the top category to get the following. After clicking the hot news, you will automatically get the following categories forward

The footer is still the part of the home page

Code display

<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>Course title</text>
							<text>4 class hours in total<text>|</text>2222 People have learned</text>
							<view class="mask">special column</view>
						</view>
						<view class="course-bottom-list"  >
							<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
							<text>Course title</text>
							<text>4 class hours in total<text>|</text>2222 People have learned</text>
							<view class="mask">special column</view>
						</view>
						<view class="course-bottom-list" >
							<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
							<text>Course title</text>
							<text>4 class hours in total<text>|</text>2222 People have learned</text>
							<view class="mask">special column</view>
						</view>
						<view class="course-bottom-list" >
							<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
							<text>Course title</text>
							<text>4 class hours in total<text>|</text>2222 People have learned</text>
							<view class="mask">special column</view>
						</view>
						<view class="course-bottom-list" >
							<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
							<text>Course title</text>
							<text>4 class hours in total<text>|</text>2222 People have learned</text>
							<view class="mask">special column</view>
						</view>
					</view>
				</view> 
			</view>
			<view class="page_footer">
				<tui-footer copyright="Copyright © 2021-2019 Learn with pleasure" :navigate="navigate"></tui-footer>
			</view>
		</view>
	</view>
</template>

summary

It didn't take long to develop this page, mainly because it took some effort to write the side-by-side style. Because the previous css foundation was weak, the progress was slow, and finally used display: flex; This attribute can be side-by-side flex Wrap: wrap; Use the flex layout to develop this. At present, we enter the second day of development. The main interface can be completed tomorrow. After the development of the learning interface and my personal center, we will start to develop the remaining small pages. Come on, Lao Zhang

Welcome to my personal blog address: Zhang Gong's personal blog is a PHP Programmer's personal blog system​​​​​​​