
wxml
<view class='myItemBox'>
<view class='myItemList' wx:for="{{itemList}}" wx:key="{{index}}" data-url="{{item.url}}" bindtap='navBtn'>
<image src='{{item.icon}}'></image>
<view class='myItemName'>{{item.name}}</view>
</view>
</view>
wxss
.myItemBox {
margin-top: 15rpx;
background: #fff;
}
.myItemList {
position: relative;
height: 100rpx;
line-height: 100rpx;
margin-left: 30rpx;
border-bottom: 2rpx solid #eee;
}
.myItemList:after {
position: absolute;
content: "";
display: block;
width: 16rpx;
height: 16rpx;
top: 50%;
margin-top: -8rpx;
right: 30rpx;
border-top: 2rpx solid #ddd;
border-right: 2rpx solid #ddd;
transform: rotate(45deg);
}
.myItemName {
margin-left: 60rpx;
}
.myItemList image {
width: 40rpx;
height: 100rpx;
padding: 30rpx 0;
box-sizing: border-box;
float: left;
}
js
Page({
data: {
itemList: [{ 'name': '全部订单', 'icon': '../../../images/order.png', 'url': '' },
{ 'name': '收获地址', 'icon': '../../../images/address.png', 'url': 'address' },
{ 'name': '我的优惠券', 'icon': '../../../images/myCoupon.png', 'url': 'coupon' },
{ 'name': '联系我们', 'icon': '../../../images/contact.png', 'url': '' },
{ 'name': '店铺管理', 'icon': '../../../images/store.png', 'url': '' },
{ 'name': '我的访客', 'icon': '../../../images/fangke.png', 'url': '' },
{ 'name': '员工管理', 'icon': '../../../images/yuangong.png', 'url': '' },
{ 'name': '销售财务统计', 'icon': '../../../images/tongji.png', 'url': '' },
{ 'name': '优惠券设置', 'icon': '../../../images/couponSet.png', 'url': '' },
]
},
navBtn:function(e){
console.log(e.currentTarget.dataset.url)
},
onLoad: function (options) { },
onReady: function () { },
onShow: function () { },
onHide: function () { },
onUnload: function () { },
onPullDownRefresh: function () { },
onReachBottom: function () { },
onShareAppMessage: function () { }
})
581

被折叠的 条评论
为什么被折叠?



