小编给大家分享一下微信小程序中如何搭建详情页静态页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
pages
目录下新建目录detail
,里面新建页面detail
:
在detail.json
中先把导航栏标题文字内容改一下:
{ "navigationBarTitleText": "DETAIL页面" }
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>美国队长</text> <text>发布于</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>转发此文章</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; } .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; }
效果图如下:
以上是“微信小程序中如何搭建详情页静态页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。