微信小程序（六） 文章詳情靜態頁面detail
阿新 • • 發佈：2019-01-16
gin round content vertica let 通訊 border 語音 .com 文章詳情靜態頁面detail：
![技術分享圖片]()
![技術分享圖片]()
detail.wxml代碼如下：
<!--pages/detail/detail.wxml--> <view class="detailContainer"> <image class="headImg" src="/static/images/test1.jpg"></image> <view class="avatar_date"> <image src="/static/images/011.jpg"></image> <text>美國隊長</text> <text>發布於</text> <text>Jan 16 2019</text> </view> <text class="company">阿童木</text> <view class="collection_share_container"> <view class="collection_share"> <image src="/static/images/sc.png"></image> <image src="/static/images/share2.png"></image> </view> <view class="line"></view> </view> <button>轉發此文章</button> <text class="content">熟人社交產品沒辦法做得過微信的關鍵並不在於通訊的形式是文字語音， 還是視頻，而在於整體的替代成本太高俞軍老師的價值公式是，產品價值=（新體驗 - 舊體驗）- 替代成本。替代成本是所有或者哪怕一部分微信關系鏈都遷移到多閃，這都是高到離譜的。比較有爭 議的在於視頻作為即時通訊的新形式，之於微信，會不會就像微信用語音功能新體驗壓制了短信的舊 體驗一樣，有著極大的體驗差。</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;
border-radius: 50%; /*設置圖片圓角*/
}
.avatar_date text{
font-size: 28rpx;
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;
border-radius: 50%;
margin-right: 20rpx;
}
.line{ /*設置虛線 */
width: 90%;
height:1rpx;
background: #eee;
position:absolute;
top:45rpx;
left:5%;
z-index: -1; /*虛線優先級*/
}
button{
width:280rpx;
height: 80rpx;
}
.content{
margin-top: 20rpx;
font-size: 32rpx;
text-indent: 64rpx;
}
detail.json代碼如下：
{
"navigationBarBackgroundColor": "#489B81",
"navigationBarTitleText": "文章詳情",
"navigationBarTextStyle": "white"
}
微信小程序（六） 文章詳情靜態頁面detail