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

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

上一篇 下一篇
制作好以后效果图如下:
一、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'});
  }
})

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 20,902次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-08
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信文章 企业网站 微信公众平台 自适应 单页式简历模板 微信素材 html5 微信模板 响应式 微信图片
您可能会喜欢的其他模板