小程序的gridview布局

1.xml文件

<view class="gridview" style='background:white;'>

<view class="gridview-item" wx:for="{{list}}" wx:key="name">

<view class='gridview-item__bg'>

<view class='gridview-item__view'>

<view class='item-text'>{{item.name}}</view>

</view>

</view>

</view>

</view>

2.js文件

// utils/gv/gv.js

Page({

 

/**

* 页面的初始数据

*/

data: {

list: [{

id: 2,

name: "大力1"

}, {

id: 2,

name:' 大力2'

}, {

id: 2,

name:' 大力3'

}, {

id: 2,

name: '大力4'

}, {

id: 2,

name: '大力5'

}, {

id: 2,

name: '大力6'

}, {

id: 2,

name:' 大力7'

}]

},

 

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(options) {

}

)

3.css文件

.gridview {

margin: 5rpx 10rpx 5rpx 10rpx;

/* 以下两个可以根据需要自己决定是留着还是去掉 */

/* position: relative;

overflow: hidden; */

/* gv整体的颜色 */

background: #eee;

}

 

.gridview:before {

content: " ";

position: absolute;

left: 0;

top: 0;

right: 0;

height: 5px;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

 

.gridview:after {

content: " ";

position: absolute;

left: 0;

top: 0;

bottom: 0;

/* 整体的左边距 */

border-left: 5px solid #d9d9d9;

color: #d9d9d9;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transform: scaleX(0.5);

transform: scaleX(0.5);

}

 

.gridview-item {

margin: 1% 1% 1% 1%;

background: #eee;

/* 加上下面一行表示默认的分割线 *//* position: relative; */

float: left;

/* 内边距可根据实际情况添加 */

/* padding: 5px 5px 5px 5px; */

width: 48%;

box-sizing: border-box;

}

 

.gridview-item:before {

content: " ";

position: absolute;

right: 0;

top: 0;

width: 1px;

bottom: 0;

border-right: 5px solid #d9d9d9;

color: #d9d9d9;

-webkit-transform-origin: 100% 0;

transform-origin: 100% 0;

-webkit-transform: scaleX(0.5);

transform: scaleX(0.5);

}

 

.gridview-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);

}

 

.gridview-item:active {

background-color: #ececec;

}

 

.gridview-item__bg {

background: #fff;

position: relative;

float: left;

padding: 0px 0px;

width: 100%;

box-sizing: border-box;

display: flex;

align-items: center;

justify-content: center;

}

 

.gridview-item__view {

width: 60px;

height: 60px;

display: flex;

align-items: center;

justify-content: center;

font-size: 12px;

color: #222;

background: #80cbc4;

margin: 10px;

}