您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序中如何搭建詳情頁(yè)靜態(tài)頁(yè)面,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
pages
目錄下新建目錄detail
,里面新建頁(yè)面detail
:
在detail.json
中先把導(dǎo)航欄標(biāo)題文字內(nèi)容改一下:
{ "navigationBarTitleText": "DETAIL頁(yè)面" }
detail.wxml
<!--pages/detail/detail.wxml--><view class='detailContainer'> <image class='headImg' src='/images/detail/carousel/1.jpg'></image> <view class='avatar_date'> <image src='/images/avatar/0.png'></image> <text>美國(guó)隊(duì)長(zhǎng)</text> <text>發(fā)布于</text> <text>2018 06 12</text> </view> <text class='company'>火影村</text> <view class='collection_share_container'> <view class='collection_share'> <image src='/images/icon/collection-anti.png'></image> <image src='/images/icon/share-anti.png'></image> </view> <view class='line'></view> </view> <button>轉(zhuǎn)發(fā)此文章</button> <text class='content'>火咖啡館就是了瘋狂關(guān)鍵時(shí)刻來(lái)得及公司領(lǐng)導(dǎo)看過(guò)就發(fā)上來(lái)的考試管理的風(fēng)格就是的離開(kāi)幾個(gè)老師</text></view>
detail.wxss
/* pages/detail/detail.wxss */ .detailContainer { display: flex; flex-direction: column; } .headImg{ width:100%; height:460rpx; } .avatar_date{ padding: 10rpx; } .avatar_date image{ width: 64rpx; height: 64rpx; vertical-align: middle; } .avatar_date text{ font-size: 32rpx; margin-left: 10rpx; } .company{ font-size: 38rpx; font-weight: bold; margin-left: 10rpx; } .collection_share_container{ position: relative; } .collection_share{ float: right; margin-right: 50rpx; } .collection_share image{ width: 90rpx; height: 90rpx; margin-right: 20rpx; } .line{ width: 90%; height: 2rpx; background: rgb(226, 19, 19); top: 45rpx; left: 5%; position: absolute; z-index: -1; } button{ width: 280rpx; height: 80rpx; } .content{ font-size: 32rpx; text-indent: 64rpx; margin: 50rpx 0; }
效果圖如下:
以上是“微信小程序中如何搭建詳情頁(yè)靜態(tài)頁(yè)面”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。