微信小程序个人中心的列表控件

个人中心的列表控件

首先来看效果图

wxml

<view class="list-item">
    <image class="item-image" src="../images/fuwu.png"></image>
    <text class="item-text">我的收藏</text>
    <image class="image-jiantou" src="../images/jiantou.png"></image>
  </view>
  <view class="line"></view>

wxss

.list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 80rpx;
  margin-top: 10rpx;
  position: relative; /*父元素位置要设置为相对*/
}

.item-image {
  width: 50rpx;
  height: 50rpx;
  margin: 20rpx;
}

.item-text {
  color: gray;
  font-size: 35rpx;
  margin-left: 20rpx;
}

.image-jiantou {
  width: 20rpx;
  height: 35rpx;
  position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
  right: 0; /* 靠右调节 */
  margin-right: 35rpx
}

.line {
  width: 100%;
  height: 3rpx;
  background: lightgray;
  margin-left: 90rpx;
}