今天给大家带来顶部简单纯文字导航列表,制作好以后效果图如下:
一、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() {
}
})
|