微信小程序-detail详情页静态页面搭建

最新推荐文章于 2024-07-06 22:23:57 发布

qq_36901488

最新推荐文章于 2024-07-06 22:23:57 发布

阅读量2.8k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_36901488/article/details/82318397

版权

微信小程序专栏收录该内容

16 篇文章 5 订阅

订阅专栏

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;
}