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















