宫格导航

1.将代码

<view class="dq1">

  <view wx:for="{{daohang}}" class="dq">

    <image  src="{{item.image}}"></image>

    <text>{{item.name}}</text>

  </view>

</view>

复制到index下面的index.wxml中

2.将代码

  daohang:[{

    image:'/pages/images/logo1.png',

    name:'京东超市'

},{

    image:'/pages/images/logo1.png',

    name:'京东超市'

},{

    image:'/pages/images/logo1.png',

    name:'京东超市'

},{

    image:'/pages/images/logo1.png',

    name:'京东超市'

},{

    image:'/pages/images/logo1.png',

    name:'京东超市'

},{

    image:'/pages/images/logo1.png',

    name:'京东超市'

},{

    image:'/pages/images/logo1.png',

   name:'京东超市'

},{

    image:'/pages/images/logo1.png',

    name:'京东超市'

}],

复制到index下的index.js的data:{},中

3.将代码

view image{

  width: 22vw;

  height: 22vw;

 }

 .dq1{

   display: flex;

   justify-content: space-around;

   flex-wrap: wrap;

  flex-direction: row;

 }

 .dq{

   display: flex;

   flex-direction: column;

   align-items: center;

 }

复制到index下的index.wxss中