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

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

浏览量:1881 时间: 来源:chibimarukochan

效果:

.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'      }    ],  },

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎