小程序九宫格

wxml文件 

<pre class="brush:xml;toolbar:false"><view class="grid-list">
 <view class="grid-item" wx:for="{{ gridData }}" wx:key="id">
 <image src="{{item.icon }}"></image>
 <text>{{item.name}}</text>
 </view>
</view></pre>


 wxss文件

<pre class="brush:xml;toolbar:false">.grid-list{
 display: flex;
 flex-wrap: wrap;
 border-left: 1rpx solid #efefef;
 border-top: 1rpx solid #efefef;
}
.grid-item{
 width: 33.33%;
 height: 200rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 border-right: 1rpx solid #efefef;
 border-bottom: 1rpx solid #efefef;
 box-sizing: border-box;
}
.grid-item image{
 width: 60rpx;
 height: 60rpx;
}
.grid-item text{
 font-size: 24rpx;
 margin-top: 10rpx;
}</pre>

 js文件

<pre class="brush:js;toolbar:false"> data: {
 gridData:[
 {id:1,name:'首页',icon:'/images/i1.png',aicon:'/images/i1a.png'},
 {id:2,name:'飞机',icon:'/images/i2.png',aicon:'/images/i2a.png'},
 {id:3,name:'入口',icon:'/images/i3.png',aicon:'/images/i3a.png'},
 {id:4,name:'首页',icon:'/images/i1.png',aicon:'/images/i1a.png'},
 {id:5,name:'飞机',icon:'/images/i2.png',aicon:'/images/i2a.png'},
 {id:6,name:'入口',icon:'/images/i3.png',aicon:'/images/i3a.png'},
 {id:7,name:'首页',icon:'/images/i1.png',aicon:'/images/i1a.png'},
 {id:8,name:'飞机',icon:'/images/i2.png',aicon:'/images/i2a.png'},
 {id:9,name:'入口',icon:'/images/i3.png',aicon:'/images/i3a.png'}
 ]
 }</pre>

小程序九宫格

添加新评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它

小程序 九宫格

添加新评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它

小程序九宫格