WeChat 文章列表页面（一）

2024-03-19 14:52:42 浏览数 (2)
UnsplashUnsplash

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

授权许可授权许可

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

welcome 页面welcome 页面

准备工作

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

代码语言：javascript复制
{
  "pages": [
    "pages/post/post",
    "pages/welcome/welcome"
  ],
  "window": {
    "navigationBarBackgroundColor": "#b3d4db"
  }
}
目录结构目录结构

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

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

swiper 组件

post.wxml 代码

代码语言：javascript复制
<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 代码

代码语言：javascript复制
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 代码

代码语言：javascript复制
<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 代码

代码语言：javascript复制
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

不缩放图片，只显示图片的右下边区域

scaleToFill 模式scaleToFill 模式
aspectFit 模式aspectFit 模式
aspectFill 模式aspectFill 模式
widthFix 模式widthFix 模式

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

代码语言：javascript复制
<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>
运行结果运行结果

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub WeChat_02 上了，有需要的同学可自行下载

微信小程序 微信 小程序

0 人点赞