微信小程序個(gè)人中心的列表控件實(shí)現(xiàn)代碼
個(gè)人中心的列表控件
首先來(lái)看效果圖

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; /*父元素位置要設(shè)置為相對(duì)*/
}
.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; /* 要約束所在位置的子元素的位置要設(shè)置成絕對(duì) */
right: 0; /* 靠右調(diào)節(jié) */
margin-right: 35rpx
}
.line {
width: 100%;
height: 3rpx;
background: lightgray;
margin-left: 90rpx;
}
到此這篇關(guān)于微信小程序個(gè)人中心的列表控件實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)微信小程序個(gè)人中心內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)在線(xiàn)客服效果
這篇文章主要介紹了javascript實(shí)現(xiàn)在線(xiàn)客服效果的實(shí)例代碼,非常不錯(cuò),這里推薦給大家,有需要的小伙伴可以參考下。2015-07-07
webpack實(shí)現(xiàn)熱加載自動(dòng)刷新的方法
本文介紹了webpack實(shí)現(xiàn)熱加載自動(dòng)刷新的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
JavaScript之iterable_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript之iterable,遍歷Array可以采用下標(biāo)循環(huán),遍歷Map和Set就無(wú)法使用下標(biāo)。為了統(tǒng)一集合類(lèi)型,ES6標(biāo)準(zhǔn)引入了新的iterable類(lèi)型,Array、Map和Set都屬于iterable類(lèi)型2017-06-06
JavaScript中發(fā)出HTTP請(qǐng)求最常用的方法
JavaScript具有很好的模塊和方法來(lái)發(fā)送可用于從服務(wù)器端資源發(fā)送或接收數(shù)據(jù)的HTTP請(qǐng)求。這篇文章主要介紹了JavaScript中發(fā)出HTTP請(qǐng)求最常用的方法,需要的朋友可以參考下2018-07-07
一個(gè)簡(jiǎn)單的彈性返回頂部JS代碼實(shí)現(xiàn)介紹
頁(yè)面滾動(dòng)條處于低端,點(diǎn)擊回到頂部,并且隱藏掉,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-06-06

