一步步开发微信小程序

Posted 2020-09-02 Darren-chen

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

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

}