主页（三）-菜单——基础布局和数据对接

菜单

菜单基本布局 display: flex;justify-content: space-around; <!-- 菜单 --> <div class="menu"> <div :key='index' v-for='(item, index) in menuData' class="menu-item"> <image :src='item.image_src'></image> </div> </div> 对接菜单后台接口数据 mpvue.request({ url: 'https://www.zhengzhicheng.cn/api/public/v1/home/catitems', success: function (res) { let {message} = res.data that.menu = message } })

在home/index.vue中,

基本布局

结构

样式

效果

对接数据

结构

<!-- 菜单 --> <div class="menu"> <img :key='index' v-for='(item, index) in menu' :src="item.image_src"> </div>

数据

export default { data () { return { menu: [], } }, methods: { menuData () { // 获取菜单数据 wx.request({ url: 'https://www.zhengzhicheng.cn/api/public/v1/home/catitems', success: (res) => { if (res.data.meta.status === 200) { this.menu = res.data.message } } }) } }, created () { this.menuData () }, }

打印菜单数据

动态数据展示效果