WP二开

uni-app开发发现界面(九宫格布局)

银戒 · 4月9日 · 2019年 · · · 2286次已读

引言

本教程为《教你用WordPress开发app(小程序)-包含所有源代码》系列教程之一。

本教程后续更新会放在:清空网络科技工作室官网

前面我讲了《uni-app新建发现页面并加入底部tab》,在这一小节中我将讲解制作一个简单的发现页面。

开始

因为时间和精力的关系,发现页面我不会做地太过复杂,就简单的写一个分类、标签列表,然后随机十篇文章用作于发现界面,简易布局图如下:

打开前面我们新建的发现界面:

整个页面代码如下:

<template>
	<view>
		<view class="catItem page-section">
			<view class="catList">分类</view>
			<view class="catList">分类</view>
			<view class="catList">分类</view>
			<view class="catList">分类</view>
			<view class="catList">分类</view>
			<view class="catList">分类</view>
		</view>
		<view class="page-section postBox">
			<view class="postList">
				<image mode="widthFix"></image>
				<view class="title">
					文章标题
				</view>
			</view>
			<view class="postList">
				<image mode="widthFix"></image>
				<view class="title">
					文章标题
				</view>
			</view>
				<view class="postList">
				<image mode="widthFix"></image>
				<view class="title">
					文章标题
				</view>
			</view>
		</view>
		<view class="tagItem page-section">
			<view class="tagList">标签</view>
			<view class="tagList">标签</view>
			<view class="tagList">标签</view>
			<view class="tagList">标签</view>
			<view class="tagList">标签</view>
			<view class="tagList">标签</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.catItem,.tagItem {
    display: flex;
    flex-wrap: wrap;
}
.catList,.tagList {
    flex-grow: 1;
    width: calc(98% / 3);
    text-align: center;
    line-height: 2;
    background-color: #757575;
    color: #cecece;
}
.postBox uni-image {
    width: 100%;
    height: 10rem;
    background: #eaeaea;
	}
.postList .title {
	    background: #000;
	    color: #fff;
	    font-size: 16px;
	    line-height: 37px;
	    padding: 0 10px;
		margin-top: -5px;
	}
.postList{
	margin-bottom: 1rem;
}
.postList:last-child{ 
margin-bottom: 0rem;
}
</style>

如图:

总结

本页面布局主要用到了css的flex布局,在app布局中这是最常见的一种布局方式,建议大家有时间了多看看。

下一节中我将讲解用WordPress开发发现界面的接口。

代码仓库: https://github.com/sliverRing/uniApp-WPApp

0 条回应