How to imitate ele.me personal center page in WeChat Mini Programs development
This article mainly introduces how to imitate the page of ele.me personal center in the development of WeChat Mini Programs, which is very detailed and has a certain reference value. Interested friends must finish reading it!
Comes with 2 skills:
Classic list Page style
Grid network
WXML file:
[mw_shl_code=html,true]-- >-- > Huang Xiujie view > view > 0.00view > balance view > view > 0view > discount view > view > 0view > Credit view > ship to address view > logout view > [/ mw_shl_code]
WXSS file:
[mw_shl_code=css,true] / * member Center * / page {background: # eee;} / * personal Information * / .summary {background: # 0097ffdisplay: flex;flex-direction: row;align-items: center;} / * profile picture * / .summary. Avatar {width: 80pxX height: 80pxpolitical margin: 20px;} / * nickname * / .summary .nickname {color: white;font-size: 22px;} / *. Personal information * / / * account information * / .account {display: flex;flex-direction: row;justify-content: space-around;margin-top: 10pxbot background: white;} / * each * / .account .item {display: flex;flex-direction: column;text-align: center;margin-left: 0flex: 1 bordermoset right: 1px solid # eee;}. Account. Item:last-child {border-right: 0;} / * numerical * / .account .item {font-size: 18px Padding-top: 10px;} / * after generic style * / .account .item .value: after {font-size: 12px * marginal left;} / * balance * / .account .item .balance {color: # fd9900;} / * unit * / .account .item .balance: after {content: 'yuan';} / * discount * / .account .item .coupon {color: # ff5f3e;} / * unit * / .account .item .coupon: after {content: 'yuan' } / * integral * / .account .item .credit {color: # 6ac20b;} / * unit * / .account .item .credit: after {content: 'points';} / * label * / .account .item .caption {margin-top:-10pxscape color: # 666X FontLizsize: 14px;} / *. Account information * / / * General list * / .listview {margin-top: 10px;} / * list item * / .listview .item {background: white;display: flex;flex-direction: row;align-items: center;position: relative;margin-left: 0listview height: 50px;} / * Arrow * / .listview .item: after {content: "; height: 8pxborderwidth: 8pxborderwidth: 2px 2px 00 bordercolor: # ccc;border-style: solid;transform:rotate (45deg) Position: absolute;margin-top:-4pxscape top: 50% 5px right: 22px;} .listview .item .hd {width: 25pxscape height: 25pxpolitical margin: 5px 0transposition possibilityleft: 20px;} .listview .item .bd {font-size: 16pxleft: 10px;} / *. General list * / / * exit and login * / .logout {background: white;padding: 2px 0position marginal talk top: 20pxbett bottom: 20pxscape color: # f23030X textMethoalign: center;font-size: 18pxpolitical line match height: 220%;} [/ mw_shl_code] these are all the contents of the article "how to imitate the page of ele.me personal center in the development of WeChat Mini Programs". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
