微信开发者工具的使用我们就不一一赘述了，下面直接看需要绘制的页面。
思路：整个页面分为头部和内容2大模块，头部又可以分为左右2个部分，将右边的部分设置成行内样式就能让图片和文字显示在一行，右边的位置可以通过相对定位进行微调。
内容部分基本上没一个模块（cell）都是一样的，可以使用for循环创建。样式的设置思路和头部的思路基本一致。
下面是WXML:
WXML中的userInfo和titleArr，imageArr,是js中已经绑定好的数据，下面是js中的demo
最后来看看样式的设置部分
/*头部信息*/
.lineView{
background-color: lightgrey;
width: 100%;
height: 20rpx;
}
.header,.my-cell{
position: relative;
}
.header-right,.my-cell-right{
display: inline-block;
overflow: hidden;
margin-left: 20rpx;
line-height: 40rpx;
font-size: 30rpx;
position: absolute;
top: 50rpx;
}
.header image{
width: 120rpx;
height: 120rpx;
background-size: cover;
border-radius: 60rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
margin-left: 30rpx;
}
/*内容*/
.my-cell-right{
top: 44rpx;
}
.my-cell image{
width: 40rpx;
height: 40rpx;
margin: 40rpx 40rpx;
}
.my-cell-line{
background-color: lightgrey;
width: 700rpx;
height: 2rpx;
margin-top: 40rpx;
}
网友评论