微信小程序家装四件套个人资料显示样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

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

二、wxss样式文件代码如下：

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

三、js页面代码如下：

//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'});
  }
})

模板简介：该模板名称为【微信小程序家装四件套个人资料显示样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。