微信小程序个人中心的列表控件实现代码

网络编程 2024/11/15 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

个人中心的列表控件

首先来看效果图

wxml

<view class="list-item">
 <image class="item-image" src="/UploadFiles/2021-04-02/fuwu.png">

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;
}

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