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

这篇文章主要讲解了如何实现微信小程序个人中心的列表控件,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

创新互联是一家专注于网站设计、成都网站建设与策划设计,镇原网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:镇原等地区。镇原做网站价格咨询:13518219792

个人中心的列表控件

首先来看效果图

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

wxml


 
 我的收藏
 
 
 

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

看完上述内容,是不是对如何实现微信小程序个人中心的列表控件有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。


本文名称:如何实现微信小程序个人中心的列表控件
当前地址:http://myzitong.com/article/pgssjp.html