WeChat 文章列表页面（一）

Nian糕

修改于 2024-03-19 14:52:42

7350

修改于 2024-03-19 14:52:42

本次的系列博文的知识点讲解和代码，主要是来自于七月老师的书籍《微信小程序开发：入门与实践》，由个人总结并编写，关于更多微信小程序开发中的各项技能，以及常见问题的解决方案，还请大家购买书籍进行学习实践，该系列博文的发布已得到七月老师的授权许可

我们在 WeChat 从一个简单的“Welcome”页面来开始小程序之旅吧中，已经完成了 welcome 页面的构建，接下来我们将完成文章页面部分，主要分为轮播图和文章列表两个部分

准备工作

通过在 app.json 的 pages 数组里加入 post 页面路径，快速创建新建阅读页面所需要的四个文件 post.wxml、post.wxss、post.js、post.json

{
  "pages": [
    "pages/post/post",
    "pages/welcome/welcome"
  ],
  "window": {
    "navigationBarBackgroundColor": "#b3d4db"
  }
}

这里需要主要的是，小程序会默认将 pages 数组下的第一项元素，作为启动时要显示的第一个页面，使用 command + S 快捷键进行保存，小程序就会自动保存编译，如果快捷键没有效果，则需要手动点击“编译”选项卡进行编译

图片素材部分，大家可自行准备，图片像素大小大于等于 750 × 600 即可，图片过小会出现“留白”的情况，也可以前往 GitHub WeChat_02 下载获取该部分的图片素材

swiper 组件

post.wxml 代码

<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000" circular="true">  
    <swiper-item>
      <image src="/images/post/post-1@text.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/post/post-2@text.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/post/post-3@text.jpg" />
    </swiper-item>
  </swiper>
</view>

post.wxss 代码

swiper {
  width: 100%;
  height: 600rpx;
}
swiper image {
  width: 100%;
  height: 600rpx;
}

swiper 组件是一个滑块视图容器，其直接子元素只能是 swiper-item，swiper-item 下可以防止其他组件或元素
需要同时设置 swiper 组件和 image 组件的宽高，才能使得图片达到预期效果，而对 swiper-item 设置宽高是没有用的，整个 <swiper/> 组件的宽高必须设在 swiper 的根节点，而 swiper-item 作为 swiper 的子集，它的默认宽高取的就是 swiper 的宽高
官方 API 文档：swiper-item 仅可放置在 swiper 组件中，宽高自动设置为 100%

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	是否采用衔接滑动

swiper 组件的更多属性请参考官方 API 文档
在这里介绍一个文档里没有提到的属性：vertical，这个属性将指明 swiper 组件面板指示点的排布方向，在 swiper 组件中加入 vertical="true"，面板指示点由原来的水平排版更改为竖直排布，并且轮播图也改为纵向滚动
属性的布尔值有一点需要注意的是，如果你设为 vertical="false"，面板指示点还是会呈现竖直排布，不管你将属性值改为任何字符串，它依旧是竖直排布，因为这里的 false，指的是字符串，而并非是布尔值，若是想让面板指示点水平排布，有以下几种方式：① 不加入 vertical 属性；② vertical=" "；③ vertical="{{false}}"

构建文章列表的骨架和样式

post.wxml 代码

<view class="post-container">
    <view class="post-author-date">
      <image src="/images/avatar/avatar-5.png" />
      <text>Jan 28 2017</text>
    </view>
    <text class="post-title">小时候的冰棍儿与雪糕</text>
    <image class="post-image" src="/images/post/post-4.jpg" />
    <text class="post-content">冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯，而5分1毛的冰棍儿就像现在的老冰棒。时过境迁，...</text>
    <view class="post-like">
      <image src="/images/icon/wx_app_collect.png" />
      <text>108</text>
      <image src="/images/icon/wx_app_view.png" />
      <text>92</text>
      <image src="/images/icon/wx_app_message.png" />
      <text>7</text>
    </view>
  </view>

post.wxss 代码

swiper {
  width: 100%;
  height: 600rpx;
}
swiper image {
  width: 100%;
  height: 600rpx;
}
.post-container {
  flex-direction: column;
  display: flex;
  margin: 20rpx 0 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}
.post-author-date {
  margin: 10rpx 0 20rpx 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.post-author-date image {
  width: 60rpx;
  height: 60rpx;
}
.post-author-date text {
  margin-left: 20px;
}
.post-image {
  width: 100%;
  height: 340rpx;
  margin-bottom: 15px;
}
.post-date {
  font-size: 26rpx;
  margin-bottom: 10px;
}
.post-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  margin-left: 10px;
}
.post-content {
  color: #666;
  font-size: 26rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}
.post-like {
  display: flex;
  flex-direction: row;
  font-size: 13px;
  line-height: 16px;
  margin-left: 10px;
  align-items: center;
}
.post-like image {
  height: 16px;
  width: 16px;
  margin-right: 8px;
}
.post-like text {
  margin-right: 20px;
}

image 组件

尽管文章列表的骨架和样式都已经构建完毕，但是图片明显被压缩变形了，post-image 这个元素的高宽分别被设置成 100%（在iPhone 6下就是 750 rpx）和 340rpx，而图片元素宽高则为 750 px 和 600 px

在这种情况下，我们必须要有所取舍，放弃等比例，或裁剪掉图片的一部分，至于如何选择，需要看业务上的需求，但在实际项目里，绝大部分的情况下，图片保持比例、允许裁切是最普遍的需求

小程序的 image 组件提供了 4 种缩放模式和 9 种裁剪模式，来支持我们的选择

4 种缩放模式

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变

9 种裁剪模式

模式	值	说明
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

至于剩下的 9 种裁剪模式读者可自行尝试，在这里就不一一列举了，我们在这里选取的 aspectFill 模式，并添加多两篇文章

<view class="post-container">
    <view class="post-author-date">
      <image src="/images/avatar/avatar-1.png" />
      <text>Jan 9 2017</text>
    </view>
    <text class="post-title">从童年呼啸而过的火车</text>
    <image class="post-image" src="/images/post/post-5.jpg" mode="aspectFill" />
    <text class="post-content">小时候，家的后面有一条铁路。听说从南方北上的火车都必须经过这条铁路。火车大多在晚上经过，但也不定时只有在夜深人静的时候，火车的声音才能从远方传来...</text>
    <view class="post-like">
     <image src="/images/icon/wx_app_collect.png" />
     <text>108</text>
     <image src="/images/icon/wx_app_view.png" />
     <text>92</text>
     <image src="/images/icon/wx_app_message.png" />
     <text>7</text>
    </view>
  </view>
  <view class="post-container">
    <view class="post-author-date">
      <image src="/images/avatar/avatar-3.png" />
      <text>Jan 29 2017</text>
    </view>
    <text class="post-title">记忆里的春节</text>
    <image class="post-image" src="/images/post/post-1.jpg" mode="aspectFill" />
    <text class="post-content">年少时，有几样东西，是春节里必不可少的：烟花、心意、凉茶、压岁钱、饺子。年分大小年，有的地方是腊月二十三过小年，有的地方是腊月二十四...</text>
    <view class="post-like">
     <image src="/images/icon/wx_app_collect.png" />
     <text>108</text>
     <image src="/images/icon/wx_app_view.png" />
     <text>92</text>
     <image src="/images/icon/wx_app_message.png" />
     <text>7</text>
    </view>
  </view>