精华

从1到2:初学者入门Demo内容列表页-文与字简介内容列表的实现

  • • 发表于 9个月前
  • • 作者 MINA搬运工
  • • 491 次浏览
  • • 3 条评论
  • • 最后编辑时间 9个月前
  • • 来自 [技术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

这里是 从1到2:初学者入门Demo内容列表页 的局部内容,因为之前内容过于多,为了方便大家的继续阅读学习,特此抽取。如果你第一次看到这部分内容,并对内容感兴趣的话,请点击查看完整原文。

文与字简介内容列表

注意:所用到的图片素材,在 百度公共盘中。失效的话,也可使用 百度私密盘; 密码:gcv1

(1)分析原型图,拆分内容结构,构造骨架(wxml)

展示内容列表

拆分结构,可将单个文与字简介内容分为三个部分:

  • a、包含头像和发布日期的头部
  • b、由文章标题、展示图、内容概述组成的主体部分
  • c、尾部是分享数数和收藏数

结构分析之后得到骨架如下(主要是基础的view、image、text的嵌套布局):

<view class="container">
  <!-- 省略了 swiper 内容 -->
  <view class="post-item-container">
    <!-- 各个文与字简介内容,基本结构一致,仅仅是灌入数据的不同,重点分析基本结构 -->

    <!-- post-item的整体布局 开始(从这里开始的呢!) -->
    <view class="post-item">
      <!-- 头部:作者头像、发布日期 -->
      <view class="post-avatar-date">
        <image class="post-avatar" src="/imgs/avatar/1.png"></image>
        <text class="post-date">Seq 12 2017</text>
      </view>

      <!-- 主体部分:标题、展示图片、内容概述 -->
      <view class="post-article" bindtap="onPostTap" data-post-id="3">
        <text class="post-title">这是标题</text>
        <image class="post-coverImg" src="/imgs/post/crab.png" mode="aspectFill" />
        <text class="post-content">这是内容概述</text>
      </view>

      <!-- 尾部:收藏图标、收藏数、分享图标、分享数 -->
      <view class="post-collection-share">
        <image src="/imgs/icon/comment.png" />
        <text>985</text>
        <image src="/imgs/icon/view.png" />
        <text>211</text>
      </view>
    </view>
    <!-- post-item的整体布局 结束-->

  </view>
</view>

该步骤完成后,得到下图:

简介内容的展示图

(2)页面骨架穿上衣服 welcome.wxss ,定义样式、布局

结构的合理拆分,可以大大提升页面搭建的速度,根据上述的分析,可以很简单的使用 flex 将各个部分进行布局,布局分析步骤依然是:先整体,再局部:(flex布局的内容,请参看CSS进阶系列一flex布局

  • 整体来看,头部、主体部分、尾部是列布局(flex-direction: column;
  • 局部来看,头像、发布日期所在的头部使用的 行布局(flex-direction: row;);主体部分使用的 列布局(flex-direction: row;);尾部的话,依然是行布局(flex-direction: row;

注意:对于图标、图片宽高的设置,除了UI设计师提供之外,不二法门就是自己尝试,慢慢调。

/* 还记得 page 吗? 为了得到一种斑马线的效果。我们设置整体的背景色是是 灰色的*/
page {
  background-color: #eee;
}

.post-swiper {
  height: 400rpx;
  width: 100%;
}

/*抽取 .post-swiper image 样式属性*/
.post-swiper image {
  height: 400rpx;
  width: 100%;
}

/*  post-item 布局 开始 (从这里开始抽取哦)*/
.post-item {
  background-color: #fff;
  margin-top: 30rpx;
  padding: 20rpx;
  border-radius: 20rpx;
}

.post-avatar-date {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10rpx;
}

.post-avatar {
  height: 80rpx;
  width: 80rpx;
  margin-right: 20rpx;
}

.post-date {
  font-size: 26rpx;
  color: #666;
}

.post-title {
  font-weight: 700;
  font-size: 38rpx;
}

.post-coverImg {
  width: 750rpx;
  height: 210px;
  margin-left: -20rpx;
  margin-top: 20rpx;
}

.post-content {
  font-size: 28rpx;
  color: #333;
}

.post-collection-share {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20rpx;
  margin-left: 500rpx;
}

.post-collection-share image {
  height: 24rpx;
  width: 24rpx;
  margin-left: 20rpx;
  margin-right: 10rpx;
}

.post-collection-share text {
  font-size: 26rpx;
  color: #999;
}
/*  post-item 布局 结束*/

该步骤完成后,得到下图(简直完美的不要不要的,有木有!):

布局后的展示图

(3)搞一个小动作 welcome.js

这里需要的就是从文与字简介内容到文与字详情页面的小动作,很熟悉有木有,还是那个轮播图片点击时间 onPostTap,再在绑定事件的 组件上设置一个 data-post-id="{{postId}}" 就可以了。

实际上我已经偷偷的完成了,就在主体部分的最外层容器上,不信你看:<view class="post-article" bindtap="onPostTap" data-post-id="3">

(4)问题来了? 说好的是 6个文与字简介内容呢,现在只有一个呀!

开始分析时,我们曾说过,文与字简介内容具有相同的基本结构,只是灌入的数据不同。那么想要 6个文与字简介内容,岂不是易如反掌,直接复制粘贴,然后替换不同的数据不就可以了吗?

先不说。小程序仅仅有1024kb! 如果是 600 个、6000个文与字简介内容呢?

再者说,大量重复,代码不够简洁,这是不能忍的。

小程序视图层(Wxml)上,当遇到大量重复的代码时,我们要做的只有两件事情:(1)将重复代码抽取成一个模板单元;(2)使用列表渲染,根据传入的数据,渲染一定数量的模板单元即可。【类似逻辑层(js)方法的抽取,是不是一样的道理:当一段功能性代码总是被复制粘贴,我们要做的就是:取功能性代码,将变化的内容作为参数传入到方法内容。在需要使用时,传入具体的数据即可。】

写在文与字简介内容列表之后

从0到1 中,我们已经完成了一个 自定义按钮的抽取,道理一样,步骤一样,唯一不同的是:这里只是代码比较多而已。大家自己动手做一下吧!

PS:为了方便大家的模板抽取,笔者已经在代码中给了小提示了,细心的你,肯定可以发现的吧!


辛苦楼主的方式有很多,可以打赏,去专栏点赞,或者是一笑而过…..,或者是说两句…. 不建议大家收藏,看完就赶紧动手吧!!!

说好的不啰嗦,还是写了 快 10000 字了。宝宝心里苦,辛苦宝宝的可以,打赏、专栏点赞等等,当然你也可以看了就走,如果你忍心的话,,,,

分享到:
评论区(共3条评论)
3条评论
Ctrl+Enter
作者

MINA搬运工

MINA搬运工

APP:4 帖子:46 回复:280 积分:3910

已加入社区[352]天

为自由而思,行自由事

作者详情》
精品推荐课程更多
扫码入群
Top