⼩程序个⼈中⼼的列表控件实现代码
个⼈中⼼的列表控件
⾸先来看效果图
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;
}
到此这篇关于⼩程序个⼈中⼼的列表控件实现代码的⽂章就介绍到这了，更多相关⼩程序个⼈中⼼内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。