微信小程序九宫格样式有哪些？怎么开发九宫格

　　微信小程序的布局里面九宫格就是使用得最为广泛的一种，因为九宫格的页面能够让用户操作更便捷。微信小程序九宫格样式有哪些呢?我们就来学习一下其中一种的开发步骤。

　　在之前的文章中实现了一种九宫格的排布方法，现在提供另一种实现，代码如下

　　[html] view plain copy print?

　　{{item.name}}

　　{{item.name}}

　　小程序界面代码中使用for循环的方式来展开，然后使用view来包裹，再将要包裹的内容放到内部，因为九宫格常常用作首页的功能块索引，所以内部增加了navigator的导航索引来实现。对于for循环中的数据直接在index.js中的data加入一个数组即可，代码如下。

　　[javascript] view plain copy print?

　　//index.js

　　//获取应用实例

　　var app = getApp()

　　Page({

　　data: {

　　routers: [

　　{

　　name: 'T1',

　　url: '',

　　icon: ''

　　},

　　{

　　name: 'T2',

　　url: '',

　　icon: ''

　　},

　　{

　　name: 'T3',

　　url: '',

　　icon: ''

　　},

　　{

　　name: 'T4',

　　url:'',

　　icon:''

　　},

　　{

　　name: 'T5',

　　url:'',

　　icon:''

　　},

　　{

　　name: 'T6',

　　url:'',

　　icon:''

　　},

　　{

　　name: 'T7',

　　url:'',

　　icon:''

　　},

　　{

　　name: 'T8',

　　url:'',

　　icon:''

　　},

　　{

　　name: 'T9',

　　url:'',

　　icon:''

　　}

　　]

　　},

　　onLoad: function () {

　　console.log('onLoad')

　　var that = this

　　}

　　})

　　//index.js

　　//获取应用实例

　　var app = getApp()

　　Page({

　　data: {

　　routers: [

　　{

　　name: 'T1',

　　url: '',

　　icon: ''

　　},

　　{

　　name: 'T2',

　　url: '',

　　icon: ''

　　},

　　{

　　name: 'T3',

　　url: '',

　　icon: ''

　　},

　　{

　　name: 'T4',

　　url:'',

　　icon:''

　　},

　　{

　　name: 'T5',

　　url:'',

　　icon:''

　　},

　　{

　　name: 'T6',

　　url:'',

　　icon:''

　　},

　　{

　　name: 'T7',

　　url:'',

　　icon:''

　　},

　　{

　　name: 'T8',

　　url:'',

　　icon:''

　　},

　　{

　　name: 'T9',

　　url:'',

　　icon:''

　　}

　　]

　　},

　　onLoad: function () {

　　console.log('onLoad')

　　var that = this

　　}

　　})

　　下面是控制布局的样式代码

　　[css] view plain copy print?

　　/**index.wxss**/

　　.weui-grids {

　　position: relative;

　　overflow: hidden;

　　}

　　.weui-grids:before {

　　content: " ";

　　position: absolute;

　　left: 0;

　　top: 0;

　　right: 0;

　　height: 1px;

　　border-top: 1px 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;

　　width: 1px;

　　bottom: 0;

　　border-left: 1px 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: 20px 10px;

　　width: 33.33333333%;

　　box-sizing: border-box;

　　}

　　.weui-grid:before {

　　content: " ";

　　position: absolute;

　　right: 0;

　　top: 0;

　　width: 1px;

　　bottom: 0;

　　border-right: 1px 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: 1px;

　　border-bottom: 1px 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__icon {

　　width: 32px;

　　height: 32px;

　　margin: 0 auto;

　　}

　　.weui-grid__icon image {

　　display: block;

　　width: 100%;

　　height: 100%;

　　}

　　.weui-grid__icon + .weui-grid__label {

　　margin-top: 5px;

　　}

　　.weui-grid__label {

　　display: block;

　　text-align: center;

　　font-weight: bold;

　　color: #000000;

　　font-size: 14px;

　　white-space: nowrap;

　　text-overflow: ellipsis;

　　overflow: hidden;

　　}

　　/**index.wxss**/

　　.weui-grids {

　　position: relative;

　　overflow: hidden;

　　}

　　.weui-grids:before {

　　content: " ";

　　position: absolute;

　　left: 0;

　　top: 0;

　　right: 0;

　　height: 1px;

　　border-top: 1px 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;

　　width: 1px;

　　bottom: 0;

　　border-left: 1px 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: 20px 10px;

　　width: 33.33333333%;

　　box-sizing: border-box;

　　}

　　.weui-grid:before {

　　content: " ";

　　position: absolute;

　　right: 0;

　　top: 0;

　　width: 1px;

　　bottom: 0;

　　border-right: 1px 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: 1px;

　　border-bottom: 1px 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__icon {

　　width: 32px;

　　height: 32px;

　　margin: 0 auto;

　　}

　　.weui-grid__icon image {

　　display: block;

　　width: 100%;

　　height: 100%;

　　}

　　.weui-grid__icon + .weui-grid__label {

　　margin-top: 5px;

　　}

　　.weui-grid__label {

　　display: block;

　　text-align: center;

　　font-weight: bold;

　　color: #000000;

　　font-size: 14px;

　　white-space: nowrap;

　　text-overflow: ellipsis;

　　overflow: hidden;

　　}

　　核心是weui-grid的width:33.33333%，这样就确保了一行只能排3块。上面的样式代码使用的是微信的weui的九宫格样式。

　　效果图

　　以上就是微信小程序九宫格样式了，再往上翻就是这个九宫格样式的开发步骤和源代码，相信大家仔细看几遍就都能掌握的。还有更多相关资料请关注微信小程序素材网。

　　微信小程序开发九宫格怎么操作?

　　微信小程序九宫格布局开发代码

　　微信小程序导航栏返回样式定制