先上效果圖

使用注意事項

1:注意在app.json中注冊頁面路徑

2:如果要增加新的item,可到js中對listservice數組進行增加

3:listservice參數[

title:分類標題

items:這個分類下的所有item[

name:這個item的名字

url:這個item點擊跳轉路徑

]]

wxml代碼

{{item.title}}

{{item.detail}}

{{item.name}}

wxss

page{

background:#eeecec;

}

.enable{

z-index: 99999;

background: #404040;

opacity: 0.8;

position: absolute;

width: 100;

bottom: 0px;

top: 0px;

left: 0px;

right: 0px;

display: flex;

justify-content: center;

align-items: center;

color: #ffffff;

}

.enable text{

color: #fafafa;

font-size: 18px;

font-weight: bold;

}

.grid {

background: #ffffff;

margin-bottom:10px;

}

.services{

background:#f5f5f5;

}

.navigator{

padding:20px 10px;

}

.grid-items {

position: relative;

overflow: hidden;

display: flex;

flex-direction: row;

flex-wrap: wrap;

}

.grid-items::before{

content: " ";

position: absolute;

left: 0;

top: 0;

right: 0;

height: 1px;

border-top: 1px solid #d9d9d9;

}

.grid-items::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);

}

.grid-item{

position: relative;

float: left;

width: 33.33333333%;

box-sizing: border-box;

}

.grid-item::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);

}

.grid-item::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);

}

.item-content{

position: relative;

padding: 0px 0px;

width: 100%;

box-sizing: border-box;

}

.item-content-icon{

width: 32px;

height: 32px;

margin: 0 auto;

}

.item-content-icon image{

display: block;

width: 100%;

height: 100%;

}

.weui-grid_label {

display: block;

text-align: center;

font-weight: bold;

color: #707070;

font-size: 16px;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

.grid-title{

display: block;

font-weight: bold;

color: #707070;

font-size: 14px;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

padding: 7px;

}

.mask{

width: 100%;

height: 100%;

position: absolute;

z-index: 999;

text-align: center;

background: rgba(0, 0, 0, 0.619);

color: #eee8e8;

line-height: 32px;

display: flex;

}

最重要的js

const app = getapp()

page({

data: {

servers:[]

},

onload: function () {

var listservice = [

{

title: '社會',

items: [{

name: '捐助',

url: '/pages/testpage/testpage',

icon: '/imgs/love.png',

code: '11'

},

{

isbind: true,

name: '捐衣物',

url: '',

icon: '/imgs/clothes.png',

code: '11'

}

]

},

{

title: '生活',

items: [{

name: '微信',

url: '',

icon: '/imgs/wechat.png',

code: '11'

},

{

isbind: true,

name: '微信',

url: '',

icon: '/imgs/wechat.png',

code: '11'

}, {

isbind: true,

name: '火車票',

url: '',

icon: '/imgs/tick.png',

code: '11'

},

]

},

{

title: '家庭',

items: [{

isbind: true,

name: '賬單',

url: '',

icon: '/imgs/bill.png',

code: '11'

}

]

}, {

title: '其他服務',

items: []

}

]

this.setdata({

servers: listservice

})

},

/**

* 當點擊item的時候傳遞過來

*/

bindnavigator: function (e) {

wx.navigateto({

url: e.currenttarget.dataset.path,

})

},

})

總結

以上是生活随笔為你收集整理的android中实现微信九宫格,微信小程序九宫格布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。