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; } |