微信小程序蓝色背景订单收货页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="info_list">
    <block wx:for="{{userListInfo}}">
        <view class="weui_cell">
            <view class="weui_cell_hd"><image src="{{item.icon}}"></image></view>
            <view class="weui_cell_bd">
                <view class="weui_cell_bd_p"> {{item.text}} </view>
            </view>
            <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}</view>
            <view class="with_arrow"></view>
        </view>
    </block>
  </view>
</view>

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

/**index.wxss**/
.container {
  background-color: #F2f2f2;
}
.userinfo {
  display: flex;
  flex-direction: column;
  padding: 50rpx 0;
  align-items: center;
  background: #35B6DD;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #fff;
}
.weui_cell{
    position: relative;
    display: flex;
    padding: 15px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1rpx solid #dadada;
    background-color: white;
}
.weui_cell_hd{
  display: inline-block;
  width: 20px;
  margin-right: 5px;
}
.weui_cell_hd image{
  width: 100%;
  height: 20px;
  vertical-align: -4px;
}
.weui_cell_bd{
  display: inline-block;
}
.weui_cell_bd_p{
  font-size: 14px;
  color: #939393;
}
.badge{
  position: absolute;
  top: 18px;
  right: 40px;
  width: 15px;
  height: 15px;
  line-height: 15px;
  background: #ff0000;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 8px;
}
.with_arrow{
  position: absolute;
  top: 18px;
  right: 15px;
  width: 15px;
  height: 15px;
  background-image: url(../../images/icon-arrowdown.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

三、js页面代码如下：

var app = getApp()
Page( {
  data: {
    userInfo: {},
    // projectSource: 'https://github.com/liuxuanqiang/wechat-weapp-mall',
    userListInfo: [ {
      icon: '../../images/orders-icon.png',
      text: '我的订单'
      // isunread: true,
      // unreadNum: 2
    }, 
    // {4px
    //     icon: '../../images/iconfont-card.png',
    //     text: '我的代金券',
    //     isunread: false,
    //     unreadNum: 2
    //   }, 
      // {
      //   icon: '../../images/iconfont-icontuan.png',
      //   text: '我的拼团',
      //   isunread: true,
      //   unreadNum: 1
      // }, 
      {
        icon: '../../images/adress-icon.png',
        text: '收货地址管理'
      }, 
      // {
      //   icon: '../../images/iconfont-kefu.png',
      //   text: '联系客服'
      // }, 
      // {
      //   icon: '../../images/iconfont-help.png',
      //   text: '常见问题'
      // }
      ]
  },

  onLoad: function() {
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo( function( userInfo ) {
      //更新数据
      that.setData( {
        userInfo: userInfo
      })
    })
  }
})

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