微信小程序之九宫格布局方案

　　2018转眼即将逝去了，由于近期在弄一个小程序的项目的原因，今天在这里记录一下小程序之九宫格布局方案，以备后期需要和相关知识温习。

　　对于整个小程序项目，原生开发小程序的方式这里就不多说了，官方有确切的说明文档以及详细的Api.近期公司做的小程序项目是采用wepy框架实现的，个人觉得这个框架还是很不错的，类似于vue的风格。总之，从构建到最后微信web开发者工具调试和预览，效果还是可以的。

　　至于具体的小程序wepy框架开发过程，安装工具等这里不做多讲(不是今天这篇文章的重点)，本次想借着写这篇博文来记录小程序页面展示的九宫格布局方案和思路。

大体效果图:

第一步：整理应用功能点，明确小程序需求功能点（这里一般为小程序各主功能或子模块功能入口点也或称之为主页面导航模块，点击模块或单元格跳转到对应功能页面）；

第二步：根据实际功能需要，考量好该导航模块数据后端处理逻辑，为本地静态数据或服务器端动态数据。如：

或请求服务端获取动态数据(这里暂用的是nodejs express搭建的后端服务)

第三步：绘制UI

这里作个简单的例子，

具体的Class样式，这里也不做赘述了，相信很多前端大牛们都能做的出好看的效果。这里贴出部分代码如下

.weui-grids {

position: relative;

overflow: hidden;

width:99%;

margin-top: 5rpx;

}

.weui-grids:before {

content:" ";

position: absolute;

left: 0;

top: 0;

right: 0;

height: 1rpx;

border-top:1rpx solid #d9d9d9;

color: #d9d9d9;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

.weui-grids:after{

content:" ";

position: absolute;

left: 0;

top: 0;

right: 0;

width: 1rpx;

bottom: 0;

border-left:1rpx solid #d9d9d9;

color: #d9d9d9;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transform: scaleX(0.5);

transform: scaleX(0.5);

}

.weui-grid {

position: relative;

float: left;

padding: 20rpx 10rpx;

width: 33.333333333%;

box-sizing: border-box;

}

.weui-grid:before {

content: " ";

position: absolute;

right: 0;

top: 0;

width: 1rpx;

bottom: 0;

border-right: 1rpx solid #d9d9d9;

color: #d9d9d9;

-webkit-transform-origin: 100% 0;

transform-origin: 100% 0;

-webkit-transform: scaleX(0.5);

transform: scaleX(0.5);

}

.weui-grid:after {

content: " ";

position: absolute;

left: 0;

bottom: 0;

right: 0;

height: 1rpx;

border-bottom: 1rpx solid #d9d9d9;

color: #d9d9d9;

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

.weui-grid:active {

background-color: #ececec;

}

.weui-grid__bg {

position: relative;

float: left;

padding: 0rpx 0rpx;

width: 100%;

box-sizing: border-box;

}

.weui-grid__icon {

width: 70%;

height: 80rpx;

margin: 0 auto;

}

.weui-grid__icon image {

display: block;

width: 100%;

height: 100%;

}

.weui-grid__icon + .weui-grid__label {

margin-top: 5rpx;

}

.weui-grid__label {

display: block;

text-align: center;

font-weight: bold;

color: #000;

font-size: 28rpx;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

OK,大功告成写的比较粗糙，仅以此来丰富成长历程，欢迎路过拍砖！

转载于:https://www.cnblogs.com/lmssong/p/10169861.html

微信小程序之九宫格布局方案相关推荐

android可拖拽九宫格,微信小程序实现九宫格图片拖拽
(在真机上的效果就不演示了,是差不多的) 实现思路布局在这里运用到了微信小程序的moveable-area和moveable-view两个标签. moveable-area是可拖拽的区域,需要设置 ...
微信小程序沉浸式布局
微信小程序沉浸式布局
微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...
微信小程序开发 — Flex布局
前言微信小程序页面布局方式采用的是Flex布局. Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局. Flex布局提供了元素在容器中的对齐,方向以及顺序 ...
微信小程序之左右布局
本文以一个简单的小例子,简述在微信小程序开发中左右布局功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,仅供学习分享使用. 概述在微信小程序开发中,左右分栏(左边显示 ...
微信小程序，横向布局，纵向布局
1.概述从Android开发过来的,所以对于wxml 这剪裁至html 的布局还是比较灵活和复杂.Android里是把方向orientation 分为 horizontal 和vertical 2. ...
微信小程序flex弹性布局
微信小程序常用布局为flex.使用flex模型来提高页面布局效率,当页面需要适应不同屏幕大小以及设备类型,该模型一确保元素在恰当的位置. 属性解释默认值其它值 flex-direction 排列 ...
微信小程序开发之布局奇盈绝技
1.微信小程序对flex流式布局支持的相当不错,甚至有些地方可以使用flex进行修复操作如在设置image这个标签的时候,内设有个10rpx的底部空间,假如这个空间背景为黑色,那么10rpx这个底部 ...
微信小程序----vant_栅格布局
微信小程序:vant组件库layout布局 1.wxml文件  <view class="tubiao"> < ...

微信小程序之九宫格布局方案

微信小程序之九宫格布局方案相关推荐

最新文章

热门文章