首页 > 小程序教程 > 微信小程序轻奢礼物说商城带个人中心样式模板制作设计下载

微信小程序轻奢礼物说商城带个人中心样式模板制作设计下载

上一篇 下一篇
今天给大家带来顶部简单纯文字导航列表,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/my/my.wxml-->
<view class="page">
	<view class="header">
		<view class="userInfo">
			<image src="{{userInfo.avatarUrl}}" class="userinfo-avatar" background-size="cover" />
			<text class="userinfo-nickname">{{userInfo.nickName}}</text>
		</view>
	</view>

	<view class="content">
		<view class="all-order" bindtap="goAllOrder">
			<view>
				<image src="http://oalppxaqn.bkt.clouddn.com/%E5%85%A8%E9%83%A8%E8%AE%A2%E5%8D%95.png" />
				<text class="all-order-word">全部订单</text>
			</view>
			<view>
				<text class="look-all-order">查看全部订单</text>
				<text class="corner">></text>	
			</view>
			
		</view>
		
		<view class="line"></view>

		<view class="wait-info">
			<block wx:for="{{array}}">
				<view class="wait-info-cell">
					<image src="{{item.address}}"></image>
					<view>{{item.id}}</view>
				</view>
			</block>	
		</view>

		<view class="product-address" bindtap="goAddressManager">
			<view class="address-cell">
				<image src="http://o7qokh4e6.bkt.clouddn.com/%E5%9C%B0%E5%9D%80.png" />
				<text>地址管理</text>
			</view>
			<text class="corner-address">></text>
		</view>

	</view>

</view>
 
二、wxss样式文件代码如下:
/* pages/my/my.wxss */
.header {
	width: 100%;
	height: 280rpx;
	background-color: #ffffff;
	padding-left: 275rpx;
}

.userInfo {
	width: 200rpx;
	height: 280rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.userinfo-avatar {
	width: 140rpx;
	height: 140rpx;
	border: 1px solid #fff;
	border-radius: 70rpx;
	box-shadow: 2rpx 2rpx 2rpx #625c52;
	/*text-align: center;*/
}

.userinfo-nickname {
	font-size: 11pt;
	color: #353535;
	font-weight: bold;
	padding-top: 20rpx;
	/*text-align: center;*/
}

.all-order {
	background-color: #fff;
	height: 80rpx;
	width: 100%;
	margin-top: 30rpx;
	font-size: 9pt;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}

.all-order image {
	width: 34rpx;
	height: 34rpx;
	padding: 0 12rpx 0 10rpx;
}

.look-all-order {
	font-size: 8pt;
	color: #888888;
}

.corner {
	padding: 0 10rpx 0 10rpx;
	font-size: 8pt;
	color: lightgray;
}

.line {
	height: 2rpx;
	width: 750rpx;
	background-color: #b2b2b2;
}

.wait-info {
	width: 100%;
	height: 150rpx;
	background-color: #fff;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
}

.wait-info-cell {
	width: 100rpx;
	height: 150rpx;
	font-size: 9pt;
	/*background-color: blue;*/
}

.wait-info-cell image {
	width: 50rpx;
	height: 50rpx;
	padding: 20rpx 0 20rpx 25rpx;
/*	background-color: green;*/
}

.wait-info-cell view {
	text-align: center;
	/*background-color: red;*/
}

.product-address {
	width: 100%;
	height: 100rpx;
	background-color: #fff;
	margin-top: 30rpx;
	font-size: 9pt;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.address-cell {
	padding: 20rpx 0 20rpx 20rpx;
}

.address-cell image {
	width: 40rpx;
	height: 40rpx;
	padding-right: 20rpx;
}

.corner-address {
	padding: 40rpx 10rpx 0 0;
	font-size: 8pt;
	color: lightgray;
}





三、js页面代码如下:
// pages/my/my.js
var app = getApp();
Page({
  data:{
    userInfo: {},
    array: [{
      id: '待付款', address: 'http://o7qokh4e6.bkt.clouddn.com/%E5%BE%85%E4%BB%98%E6%AC%BE.png'
    },
    {
      id: '待发货', address: 'http://oalppxaqn.bkt.clouddn.com/%E5%BE%85%E5%8F%91%E8%B4%A7.png'
    },
    {
      id: '待收货', address: 'http://oalppxaqn.bkt.clouddn.com/%E5%BE%85%E6%94%B6%E8%B4%A7.png'
    }]
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    app.getUserInfo(function(userInfo) {
      that.setData({
        userInfo: userInfo
      });
    })
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  goAllOrder: function() {

  },
  goAddressManager: function() {
    
  }
})

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

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