WeChat 文章列表页面(一)

Unsplash

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

授权许可

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

welcome 页面

0. 准备工作

通过在 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 下载获取该部分的图片素材

1. 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}}"

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

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;
}

运行结果

3. 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 模式

aspectFit 模式

aspectFill 模式

widthFix 模式

至于剩下的 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>

运行结果

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

End of File

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ppjun专栏

Android十八章:帧动画

下面我们来说什么是帧动画。小时候有一种书的右下角把每一个动作画好,再快速的翻看,就可以看到一连串的动画了,这就是帧动画。 帧动画只要几张图片就能加载出动画效果...

10210
来自专栏Google Dart

AngularDart Material Design 菜单 顶

材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-list和material-button,其文本或图标...

10020
来自专栏达摩兵的技术空间

你不知道的height常识

本文将总结一些height中你不知道的常识内容,希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

11430
来自专栏HTML5学堂

2016.06 第三周 群问题分享

HTML+CSS 怎么让一个容器里面不管存在2个子元素还是1个子元素都能垂直居中 2016.06.20~2016.06.24 核心内容 弹性布局 参考答案 实例...

31090
来自专栏HTML5学堂

position:absolute 的深入探讨

今天给大家说说,position:absolute 参考谁进行定位的问题。之前大家可能会认为如果absolute元素的父级(祖父)元素没有设置position属...

30360
来自专栏javascript趣味编程

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

14600
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

20330
来自专栏编程

CSS布局之垂直居中一

CSS中的水平居中是非常容易实现的,比如对于行内元素,将它的父级元素设置text-align为center既可。 ? 对于块级元素,设置它的margin:aut...

20470
来自专栏企鹅号快讯

漂亮loading加载动画,这些方法可知道?

这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很...

35860
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

16310

扫码关注云+社区

领取腾讯云代金券