wepy实现九宫格

注册页面
pages目录下新建文件夹example，并在此新建example.wpy；同理新建book.wpy，vote.wpy，test.wpy
在app.vue中添加注册信息，example放在indexi前

<!--app.wpy-->
<config>
{
    "pages":[
        "pages/example/example",
        "pages/index/index"
    ]
}
</config>

九宫格组件
components目录下新建组件grids.wpy
在

template模板代码

<!--grids.wpy-->
<template>
    <div class="grids-list">
        <div class="list-item" v-for="(grid,index) in grids" v-bind:key="index" >
          <!-- <router-link v-bind:to="grid.router.path"> -->
            <navigator url="{{grid.router.path}}" open-type="navigate" hover-class="none">
              <img :src="grid.src"/>
              <p>{{grid.title}}</p>
            </navigator>
          <!-- </router-link> -->
        </div> 
    </div>
</template>

css样式

<!--grids.wpy-->
.grids-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.list-item {
  width: 33%;
  height: 100px;
  text-align: center;
  font-size: 12px;
  margin-top: 15px;
}
.list-item image {
  width: 80px;
  height: 80px;
}
.opacity {
  opacity: 0.4;
  background: #e5e5e5;
}

引用组件
example.wpy中引用grids.wpy组件
在example.wpy的

template模板代码

<template>
<div>
    <grids></grids>
</div>
</template>

项目目录

参考链接：https://shimo.im/docs/TdPj8dpcxJpHT6HH/