微信小程序開發中如何仿寫餓了么個人中心頁面

這篇文章主要介紹微信小程序開發中如何仿寫餓了么個人中心頁面，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

附帶2個技能：

• 經典列表頁樣式

• grid網絡

WXML文件：

[mw_shl_code=html,true]<view class="summary">--><image src="/images/default-avatar.png" class="avatar" />--><view class="nickname">黃秀杰view>view><view class="account"><view class="item"><view class="value balance">0.00view><view class="caption">余額view>view><view class="item"><view class="value coupon">0view><view class="caption">優惠view>view><view class="item"><view class="value credit">0view><view class="caption">積分view>view>view><view class="listview"><view class="item"><image class="hd" src="/images/address.png" /><view class="bd">收貨地址view><view class="ft">view>view>view><view class="logout">退出登錄view>[/mw_shl_code]

WXSS文件：

[mw_shl_code=css,true]/*會員中心*/page {background: #eee;
}/*個人信息*/.summary {background: #0097ff;display: flex;flex-direction: row;align-items: center;
}/*頭像*/.summary .avatar {width: 80px;height: 80px;margin: 20px;
}/*昵稱*/.summary .nickname {color: white;font-size: 22px;
}/*.個人信息*//*賬戶信息*/.account {display: flex;flex-direction: row;justify-content: space-around;margin-top: 10px;background: white;
}/*每一項*/.account .item {display: flex;flex-direction: column;text-align: center;margin-left: 0;flex: 1;border-right: 1px solid #eee;
}.account .item:last-child {border-right: 0;
}/*數值*/.account .item .value {font-size: 18px;padding-top: 10px;
}/*after通用樣式*/.account .item .value:after {font-size: 12px;margin-left: 5px;
}/*余額*/.account .item .balance {color: #fd9900;
}/*單位*/.account .item .balance:after {content: '元';
}/*優惠*/.account .item .coupon {color: #ff5f3e;
}/*單位*/.account .item .coupon:after {content: '個';
}/*積分*/.account .item .credit {color: #6ac20b;
}/*單位*/.account .item .credit:after {content: '分';
}/*標簽*/.account .item .caption {margin-top: -10px;color: #666;font-size: 14px;
}/*.賬戶信息*//*通用列表*/.listview {margin-top: 10px;
}/*列表項*/.listview .item {background: white;display: flex;flex-direction: row;align-items: center;position: relative;margin-left: 0;height: 50px;
}/*箭頭*/.listview .item:after {content: " ";height: 8px;width: 8px;border-width: 2px 2px 0 0;border-color: #ccc;border-style: solid;transform:rotate(45deg);position: absolute;margin-top: -4px;top: 50%;right: 22px;
}.listview .item .hd {width: 25px;height: 25px;margin: 5px 0;padding-left: 20px;
}.listview .item .bd {font-size: 16px;margin-left: 10px;
}/*.通用列表*//*退出登錄*/.logout {background: white;padding: 2px 0;margin-top: 20px;margin-bottom: 20px;color: #f23030;text-align: center;font-size: 18px;line-height: 220%;
}[/mw_shl_code]

以上是“微信小程序開發中如何仿寫餓了么個人中心頁面”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！