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













