<!--index.wxml--> <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="info_list"> <block wx:for="{{userListInfo}}"> <view class="weui_cell"> <view class="weui_cell_hd"> <image src="{{item.icon}}"></image> </view> <view class="weui_cell_bd"> <view class="weui_cell_bd_p"> {{item.text}} </view> </view> <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}</view> <view class="with_arrow"></view> </view> </block> </view> </view> |
/**index.wxss**/ .container { background-color: #F2f2f2; } .userinfo { display: flex; flex-direction: column; padding: 50rpx 0; align-items: center; background: #f9f027; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #333; } .weui_cell { position: relative; display: flex; padding: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #dadada; } .weui_cell_hd { display: inline-block; width: 20px; margin-right: 5px; } .weui_cell_hd image { width: 100%; height: 20px; vertical-align: -2px; } .weui_cell_bd { display: inline-block; } .weui_cell_bd_p { font-size: 14px; color: #939393; } .badge { position: absolute; top: 18px; right: 40px; width: 15px; height: 15px; line-height: 15px; background: #ff0000; color: #fff; border-radius: 50%; text-align: center; font-size: 8px; } .with_arrow { position: absolute; top: 18px; right: 15px; width: 15px; height: 15px; background-image: url(../../images/icon-arrowdown.png); background-repeat: no-repeat; background-size: 100% 100%; } |
var app = getApp() Page({ data: { userInfo: {}, userListInfo: [{ icon: '../../images/iconfont-dingdan.png', text: '我的订单', isunread: false, unreadNum: 0 }, { icon: '../../images/iconfont-card.png', text: '我的代金券', isunread: false, unreadNum: 0 }, { icon: '../../images/iconfont-icontuan.png', text: '我的拼团', isunread: false, unreadNum: 0 }, { icon: '../../images/iconfont-shouhuodizhi.png', text: '收货地址管理' }, { icon: '../../images/iconfont-kefu.png', text: '联系客服' }, { icon: '../../images/iconfont-help.png', text: '常见问题' }] }, onLoad: function() { var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo) { //更新数据 that.setData({ userInfo: userInfo }) }) } }) |
模板简介:该模板名称为【微信小程序我的商城个人中心黄色风格设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。