微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作

详情 - 页面制作

本文配套视频地址: https://v.qq.com/x/page/o0555o20xjd.html

开始前请把 ch4-1 分支中的 code/ 目录导入微信开发工具 这一章节中,主要介绍详情页的页面制作过程

首先看一下我们最终要展示的页面

页面结构大体分为三部分,也是最常见的布局方式:头部、中间体、尾部。最顶部的是页面 title,也就是标题,如果是一般的页面,我们只需要在 detail.json 中增加如下配置即可: "navigationBarTitleText": "Quora精选:为什么聪明人总能保持冷静"

但我们制作的详情页面信息是随着文章内容一直变化的,所以需要在代码中单独处理,就不需要在 detail.json 中添加 这里,我们先制作出:头部和尾部。中间的内容部分,会由 parse.js 解析文章数据生成。

开始之前,我们先修改 app.wxss 文件,引入需要用到的公用样式表和第三方样式

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

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

Step 1. 页面准备

  1. 由于文章需要上下滚动,我们采用 scroll-view 组件来包括整个页面内容 <!-- detail.html --> <scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap"> </scroll-view>

scroll-view 组件,相当于我们在常规的 div 标签上增加了滚动功能并进行封装

  1. 然后调整下页面的高度和背景色 ```css /* detail.css */ page { background: #fbfbfb; height: 100% }

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

Step 2. 页面头部制作

  1. 头部包含三块内容:大标题、左浮动显示作者、右浮云显示日期,制作如下:
<!-- 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精选:为什么聪明人总能保持冷静</view>
   <view class="info-desc cf">
      <text class="info-desc-author fl">哈利波特</text>
      <text class="info-desc-date fr">2017/06/27</text>
   </view>
   <view class="info-line under-line"></view>
 </view> 
</view>
 </scroll-view> 

2. 对应样式文件,注意: fl(float:left)fr(float:right)cf(clear:float) 三个样式都是在 base.wxss 中设置的全局样式 ```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. 页面尾部制作

页尾类似于于菜单导航功能,用户可以进入 下一篇返回 列表,并且当页面滚动时候,固定在底部不动

修改页面 detail.html

  <!-- 增加以下内容,footbar节点与info节点平级 -->
  <view class="footbar">
    <form>
      <button class="footbar-back clearBtnDefault">
        <view class="icon footbar-back-icon"></view>
      </button>
      <button class="footbar-btn clearBtnDefault">下一篇</button>
      <button class="footbar-share clearBtnDefault">
        <view class="icon footbar-share-icon"></view>
      </button>
    </form>
  </view>

修改样式表

  /* detail.css 增加以下样式内容 */
  .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
  }

页面尾部制作完成,下一步我们将处理中间的文章内容部分。

Step 4. 为中间的 content 内容预留位置

完整的页面代码如下

  <scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap">
      <view class="wrapper">
          <view class="info">
            <view class="info-title">Quora精选:为什么聪明人总能保持冷静</view>
            <view class="info-desc cf">
              <text class="info-desc-author fl">哈利波特</text>
              <text class="info-desc-date fr">2017/06/27</text>
            </view>
            <view class="info-line under-line"></view>
          </view>
          <!-- 增加正文视图位置  -->
          <view class="content">
              文章正文
          </view>
          <view class="footbar">
              <form>
                  <button class="footbar-back clearBtnDefault">
                      <view class="icon footbar-back-icon"></view>
                  </button>
                  <button class="footbar-btn clearBtnDefault">下一篇</button>
                  <button class="footbar-share clearBtnDefault">
                      <view class="icon footbar-share-icon"></view>
                  </button>
              </form>
          </view>
      </view>
  </scroll-view>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

excel开发工具设计问卷

今天跟大家分享利用excel开发工具设计问卷! 虽然说现在的在线网络问卷设计与分发平台已经发展的很成熟(金数据、问卷星),从题型设计、渠道分发、简单预处理、初步...

3566
来自专栏快乐八哥

Web Fundamentsals学习1-Multiple-Screen-Site

你的一个运行于多设备网站(Your First Multi-device Site) ? 遵循的步骤: 1.定义信息架构(information archite...

1809
来自专栏禁心尽力

快速完成(图片旋转,查看原图)

一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图。   主要使用的是jQuery的delegate()方法实现图片旋转,该...

1858
来自专栏小巫技术博客

Building TensorFlow on Android(译)

881
来自专栏ASP.NET MVC5 后台权限管理系统

.Net 转战 Android 4.4 日常笔记(9)--常用组件的使用方法[附源码]

经过两天的学习,把常用的组件都学习了一遍,并做成了App 学习可能真没有捷径,跟学习html有点类似,都是一个控件一个控件学习并使用,最后拼凑成一个系统 链接:...

1766
来自专栏FreeBuf

一种绕过限制下载论文的思路

注:本文下面的内容仅讨论绕过思路,作为技术交流之用。大家下载论文还是应该通过正规渠道,付费下载,尊重各位站长的劳动成果。敏感图片和代码中涉及站点的内容均已打码。

1262
来自专栏数据小魔方

think-cell chart系列19——任务甘特图

今天跟大家分享think-cell chart系列19——任务甘特图。 甘特图在之前的教程中曾经讲过,当时是在excel中制作完成的,花费了相当多的时间和功夫。...

4457
来自专栏崔庆才的专栏

腾讯云主机上测试BootStrap4编译FlexBox

最近在开发一个移动端适配的网站,使用了materi-ui框架,基于React。使用materi-ui时,已经内置了许多样式,但是bootstrap的一些多余样式...

2220
来自专栏Java3y

脑图大全

1371
来自专栏Danny的专栏

Axure实现Tab选项卡切换功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

802

扫码关注云+社区