WXML中遍历：
<cover-view class="tab-list"> <cover-view class="tab-list-border"></cover-view> <cover-view wx:for="{{Menulist}}" wx:key="index" class="tab-list-item" data-path="{{item.URI}}" data-index="{{index}}"> <cover-view class="Icon-View"> <navigator url="{{item.URI}}"> <cover-image src="{{item.ImgUrl}}"></cover-image> <cover-view>{{item.NAME}}</cover-view> </navigator> </cover-view> </cover-view> </cover-view> |
js获取菜单集合:
GetMenuInfo: function(UserId, Pid) { var that = this; wx.request({ url: app.globalData.URL + '/api/WxMenu/GetuserMenu', data: { UserId: UserId, Pid: Pid }, header: {}, method: 'GET', dataType: 'json', responseType: 'text', success: function(res) { if (res.data != null) { console.log("已获取菜单：", res.data) that.setData({ Menulist: res.data }) } else {} }, fail: function(res) {}, complete: function(res) {}, }) }, |
Wxss:
.tab-list { margin-top: 10rpx; width: 100%; position: relative; display: flex; transition-duration: 0s; align-items: center; flex-direction: row; } .tab-list-border { background-color: rgba(0, 0, 0, 0.33); } .tab-list-item { text-align: center; margin: 2rpx; width: 180rpx; border-bottom: 1px solid #F5F5F5; border-right: 1px solid #F5F5F5; } .tab-list-item cover-image { width: 60%; height: 60%; margin-left:20%; margin-bottom: 10rpx; } .tab-list-item cover-view { font-size: 25rpx; } |
代码片段
麻烦提供能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）