Details - Page Production

The video accompanying this article is at. https://v.qq.com/x/page/o0555o20xjd.html

Before you start, please put ch4-1 in the branch code/ Catalog Import WeChat Development Tools In this section, the page creation process for detail pages is covered

First look at the page we'll end up showing

The page structure is roughly divided into three parts, and is the most common way of laying out the page: head, intermediate, and tail. At the top is the page title , which is the title, and if it's a general page, we just need to add the detail.json Simply add the following configuration to the "navigationBarTitleText": "Quora winnow： Why smart people always keep their cool"

However, the information on the detail pages we make changes all the time with the content of the article, so it needs to be handled separately in the code, and there would be no need for the detail.json add in Here, we make the first: the head and the tail. The content section in the middle will be created by the parse.js Parsing article data generation.

Before we begin, let's modify the app.wxss file, introducing the common stylesheets and third-party styles that need to be used

@import "./styles/base.wxss";
@import "./lib/wxParse/wxParse.wxss";

.green{
    color: #26b961;
}
page{
    height: 100%;
    background-color: #f8f8f8;
}

Step 1. Page preparation

1. Since the article needs to scroll up and down, we use scroll-view component to include the entire page content <!-- detail.html --> <scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap"> </scroll-view>

scroll-view component, which is equivalent to what we see in the regular div Scrolling feature added to tabs and wrapped

1. Then adjust the height of the page and the background color ```css /* detail.css */ page { background: #fbfbfb; height: 100% }

.root-wrap { height: 100% } ```

Step 2. Page header creation

1. The header contains three pieces: a large title, a left float showing the author, and a right floating cloud showing the date, produced as follows.

<!-- detail.html -->
<scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap">
<view class="wrapper">
 <view class="info">
   <view class="info-title">Quora winnow： Why smart people always keep their cool</view>
   <view class="info-desc cf">
      <text class="info-desc-author fl"> Harry Potter (Harry Potter)</text>
      <text class="info-desc-date fr">2017/06/27</text>
   </view>
   <view class="info-line under-line"></view>
 </view> 
</view>
 </scroll-view> 

2. Corresponding style files, note. fl(float:left)、 fr(float:right)、 cf(clear:float) All three styles are available in base.wxss The global style set in ```css /* detail.css */ page { background: #fbfbfb; height: 100% }

.root-wrap { height: 100% }

.wrapper { padding-bottom: 96rpx }

.wrapper .top-img { width: 100%; height: 470rpx; vertical-align: top }

.wrapper .info { padding: 0 36rpx }

.wrapper .info-title { padding: 40rpx 0; line-height: 60rpx; font-size: 44rpx; font-weight: 500; color: #333 }

.wrapper .info-desc { font-size: 28rpx; line-height: 30rpx; color: #c1c1c1 }

.wrapper .info-desc-author { max-width: 65%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden }

.wrapper .info-line { margin-top: 24rpx } ```

Step 3. Page tail creation

The end of the page is similar to a menu navigation function that allows users to access Next Article. perhaps return to list and is fixed at the bottom when the page is scrolled

Modify page detail.html

  <!--  Add the following，footbar Nodes andinfo Node Leveling -->
  <view class="footbar">
    <form>
      <button class="footbar-back clearBtnDefault">
        <view class="icon footbar-back-icon"></view>
      </button>
      <button class="footbar-btn clearBtnDefault"> Next Article.</button>
      <button class="footbar-share clearBtnDefault">
        <view class="icon footbar-share-icon"></view>
      </button>
    </form>
  </view>

Modify the style sheet

  /* detail.css  Add the following style content */
  .wrapper .footbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 96rpx;
    line-height: 96rpx;
    background: #fff;
    font-size: 32rpx;
    color: #333
  }

  .wrapper .footbar-back,.wrapper .footbar-share {
    position: absolute;
    width: 96rpx;
    height: 96rpx;
    bottom: 0;
    z-index: 2
  }

  .wrapper .footbar .icon {
    position: absolute;
    width: 42rpx;
    height: 38rpx;
    top: 30rpx
  }

  .wrapper .footbar-back {
    left: 0
  }

  .wrapper .footbar-back-icon {
    left: 30rpx;
    background: url(https://n1image.hjfile.cn/mh/2017/06/06/1305a8ac4dc9347b59cc8c2c667122e5.png) 0 0 no-repeat;
    background-size: contain
  }

  .wrapper .footbar-list {
    left: 0
  }

  .wrapper .footbar-list-icon {
    left: 30rpx;
    background: url(https://n1image.hjfile.cn/mh/2017/06/09/1e630ac45547e6ab5260928e1d57a3c6.png) 0 0 no-repeat;
    background-size: contain
  }

  .wrapper .footbar-btn {
    text-align: center;
    margin: 0 96rpx;
    height: 96rpx;
    line-height: 96rpx
  }

  .wrapper .footbar-share {
    right: 0
  }

  .wrapper .footbar-share-icon {
    right: 30rpx;
    background: url(https://n1image.hjfile.cn/mh/2017/06/09/ebc3852fb865bd19182c09ca599d8ac1.png) 0 0 no-repeat;
    background-size: contain
  }

  .wrapper .clearBtnDefault {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 0
  }

  .wrapper .clearBtnDefault:after {
    content: '';
    border: none;
    border-radius: 0;
    width: 0;
    height: 0
  }

With the end of the page created, we will next tackle the middle section of the article content.

Step 4. Reserve a place for the content in the middle

The complete page code is as follows

  <scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap">
      <view class="wrapper">
          <view class="info">
            <view class="info-title">Quora winnow： Why smart people always keep their cool</view>
            <view class="info-desc cf">
              <text class="info-desc-author fl"> Harry Potter (Harry Potter)</text>
              <text class="info-desc-date fr">2017/06/27</text>
            </view>
            <view class="info-line under-line"></view>
          </view>
          <!--  Add body view position  -->
          <view class="content">
               Article Text
          </view>
          <view class="footbar">
              <form>
                  <button class="footbar-back clearBtnDefault">
                      <view class="icon footbar-back-icon"></view>
                  </button>
                  <button class="footbar-btn clearBtnDefault"> Next Article.</button>
                  <button class="footbar-share clearBtnDefault">
                      <view class="icon footbar-share-icon"></view>
                  </button>
              </form>
          </view>
      </view>
  </scroll-view>

Recommended>>
1、SparkSQL Technical Points Summary
2、3 minutes to understand bitcoin in seconds
3、Text Extraction Functions
4、Suspected 300 million user data breach at Shunfeng two bitcoins traded on the dark web SF Response False
5、Membership Information and Prices

已发送

发送中