文章詳情靜態(tài)頁面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>發(fā)布于</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>轉(zhuǎn)發(fā)此文章</button> <text class="content">熟人社交產(chǎn)品沒辦法做得過微信的關(guān)鍵并不在于通訊的形式是文字語音， 還是視頻，而在于整體的替代成本太高俞軍老師的價值公式是，產(chǎn)品價值=（新體驗 - 舊體驗）- 替代成本。替代成本是所有或者哪怕一部分微信關(guān)系鏈都遷移到多閃，這都是高到離譜的。比較有爭 議的在于視頻作為即時通訊的新形式，之于微信，會不會就像微信用語音功能新體驗壓制了短信的舊 體驗一樣，有著極大的體驗差。</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%; /*設(shè)置圖片圓角*/ } .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{ /*設(shè)置虛線 */ width: 90%; height:1rpx; background: #eee; position:absolute; top:45rpx; left:5%; z-index: -1; /*虛線優(yōu)先級*/ } button{ width:280rpx; height: 80rpx; } .content{ margin-top: 20rpx; font-size: 32rpx; text-indent: 64rpx; }

?

detail.json代碼如下：

{ "navigationBarBackgroundColor": "#489B81", "navigationBarTitleText": "文章詳情", "navigationBarTextStyle": "white" }

?

轉(zhuǎn)載于:https://www.cnblogs.com/ly-520/p/10279073.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序（六） 文章详情静态页面detail的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。