258资源分享网

微信开发者工具的使用我们就不一一赘述了，下面直接看需要绘制的页面。思路：整个页面分为头部和内容2大模块，头部又可以分为左右2个部分，将右边的部分设置成行内样式就能让图片和 ...

微信开发者工具的使用我们就不一一赘述了，下面直接看需要绘制的页面。 

思路：整个页面分为头部和内容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:40rpx40rpx;

}

.my-cell-line{

background-color: lightgrey;

width:700rpx;

height:2rpx;

margin-top:40rpx;

}

今天做的是这个页面