uniapp 快速实现简单首页布局

效果如图：图片加文字

后端获取的话只需要一个循环即可，
这里举例单个样式
一、UI代码：

 <view class="modules"> <view class="item" @click="liClick('XX管理1')"><image class="pic" src="../../static/home_commit.png" /><view class="name">xx管理1</view></view></view>

二、css代码

.modules {width: 100%;margin-top: 32px;display: inline-block;.item {width: 25%;float: left;margin-bottom: 20px;text-align: center;.pic {width: 60px;height: 60px;background: #ffffff;margin: 0 auto;}.name {color: #333333;font-size: 16px;}}}

uniapp 快速实现简单首页布局相关推荐

UniAPP 快速入门学习
目录 UniAPP 快速入门学习一.UniAPP 介绍 (1)什么是 UniAPP ? (2)为什么要选择 UniAPP ? (3)UniAPP 功能框架 (4)UniAPP 开发环境搭建二.Un ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
SharePoint Online 创建门户网站系列之首页布局
前言 SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Onlin ...
小程序高级电商前端第1周走进Web全栈工程师一----小程序注册、开发工具推荐、《风袖》首页布局详尽分析、Webstorm开发小程序必配配置、mock数据...
接下来开启一门全新的课程的学习,其实这是去年6月份所记录的,只是木有公开,然后到目前为止已经间隔了快1年没管了,基本上是已经快放弃的节奏,但是呢它又是我一直特别想学习的,所以决定公开,鞭策自己得继续前 ...
VUE全家桶项目实战-- 4.后台首页布局
VUE全家桶项目实战-- 4.后台首页布局一.页面布局二.创建Home组件三.路由index.js 文件配置主页路径四.添加welcome组件一.页面布局 <el-container& ...
Unreal Engin_画廊制作笔记_001＜设计草图，利用BSP快速搭建简单场景＞
001设计草图,利用BSP快速搭建简单场景本笔记开始记录所学的知识点以及细节操作等,分享下自己学习UE4的经验,也为了巩固知识,便于复习. 接下来我会以模块化的方式,根据步骤来分享学习制作的经验,如 ...
微信小程序（看文档写实例三）微信小程序课堂宝APP实现整体界面框架及首页布局
一.首页布局简单思路回顾上一篇博文,首页的内容主要有轮播图,横向滑动菜单以及菜单对应的view,横向滑动菜单有签到.课堂测试.模拟测试.课堂提问.答问记录五个选项,当点击选项时更新显示view.由于 ...
鸿蒙版瑞幸咖啡开发日记（一）首页布局设计
鸿蒙版瑞幸咖啡开发日记之首页布局设计 1.整体布局设计思路 2.三大模块开发 2.1 头部信息栏的开发 2.2 中间菜单栏的开发 2.2.1 一级分类菜单 2.2.2 二级分类菜单思路整理 2.2.3 ...
Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...

uniapp 快速实现简单首页布局

uniapp 快速实现简单首页布局相关推荐

最新文章

热门文章