<view class="list"> <view class="item tou-item" bindtap=""> 头像 <image class="tou" src="{{userInfo.avatarUrl}}"/> <text class="jump"></text> </view> <view class="item" bindtap="" data-field="username"> 名称 <text class="text">{{userInfo.nickName}}</text> <text class="jump"></text> </view> <view class="item" bindtap=""> 性别 <text class="text">{{userInfo.gender == "1" ? "男":"女"}}</text> <text class="jump"></text> </view> <view class="item" bindtap="address"> 收货地址 <text class="text">{{address == "" ? "添加地址":address.address}}</text> <text class="jump">〉</text> </view> </view> |
/**index.wxss**/ page{ background: #f3f3f3; height: 100%; } .list { margin-top:10px; background: #fff; border-top:1px solid #eee; } .list .item{ padding:20px 10px; margin:0 5px; font-size: 14px; color:#333; position: relative; border-bottom: 1px solid #f3f3f3; } .list .item::last-child{ border:none; } .list .item .tou { width:50px; height: 50px; border-radius: 5px; margin-right:30px; float: right; } .list .tou-item { line-height: 50px; } .list .item:after{ content: ""; display: block; clear: both; } .list .item .jump{ position: absolute; right:20px; color:#999; } .list .item .text{ float:right; margin-right:30px; color:#999; } |
//index.js //获取应用实例 var app = getApp() var sta = require("../../utils/statistics.js"); Page({ data: { userInfo: {}, }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { var that = this app.getUserInfo(function (userInfo){ that.setData({ userInfo:userInfo }); }) var allAddress = wx.getStorageSync('address'); var address = ''; for(var i=0;i<allAddress.length;i++){ if( allAddress[i].checked){ address = allAddress[i]; break; } } if(address == '' && allAddress.length > 0){ address = allAddress[0]; } that.setData({ address:address }); }, onShow:function (){ sta(); console.log("页面被重新加载"); }, address:function (){ wx.navigateTo({ url: '/pages/address/index'}); } }) |
模板简介:该模板名称为【微信小程序家装四件套个人资料显示样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。