微信小程序-个人中心/钱包

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ChibiMarukoChan/article/details/82884738

效果：

.wxml页面

<view class="user_content">
  <!--表头-->
  <view class="user_head">
    <view class="user_img domain">
      <view class="userinfo-avatar">账户余额</view>
      <view class="userinfo_name">￥300.00</view>
    </view>
  </view>
  <view class="user_edit_con">
    <navigator wx:for="{{ items }}" url="{{ item.url}}">
      <view class="user_edit_li">
        <view class="user_edit_li_title">
          <text class="{{ item.image }}" style="{{ item.color }}"></text>
          <text class="fr grey">{{ item.text }}</text>
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
    </navigator>
  </view>
  <view class="user_edit_con">
    <navigator wx:for="{{ items2 }}" url="{{ item.url}}">
      <view class="user_edit_li">
        <view class="user_edit_li_title">
          <text class="{{ item.image }}" style="{{ item.color }}"></text>
          <text class="fr grey">{{ item.text }}</text>
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
    </navigator>
  </view>
</view>

.wxss样式：

page {
  display: block;
  min-height: 100%;
  background-color: rgb(245,245,245);
}
.user_head {
    position: relative;
    background: #fff;
    padding: 20px 0;
    font-size: 14px;
    color: #ffffff;
    background:#3B3B3B;

}
.user_img {
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.userinfo_name {
    clear: both;
    width: 100%;
    padding-top: 10px;
    color:#ffffff;
    font-size:20px
}

.userinfo-avatar {
    font-size:30px;
    font-weight: bolder;
    text-align: center;
}

.user_edit_con {
    background: #fff;
    margin-top:10px;
}
.icon-chongzhi1,.icon-tixian,.icon-yinhangqia,.icon-jiaoyijilu{
  font-size:30px;
  margin-right:10px;
}

 .icon-jiantou{
  font-size:15px;
  float:right;
}

.user_edit_li_title {
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    border-bottom: 1px solid #f5f5f5;
    border-bottom-color: #f5f5f5;
    font-size:14px;

}

.js数据：

data: {
    items: [
      {
        url: '',
        image: 'iconfont icon-chongzhi1',
        text: '充值',
        color: 'color:#63B8FF'
      }, {
        url: '',
        image: 'iconfont icon-tixian',
        text: '提现',
        color: 'color:red'
      }
    ],
    items2: [
      {
        url: '',
        image: 'iconfont icon-yinhangqia',
        text: '银行卡',
        color: 'color:#63B8FF'
      }, {
        url: '',
        image: 'iconfont icon-jiaoyijilu',
        text: '交易记录',
        color: 'color:red'
      }
    ],

  },