美文网首页小程序Web前端之路程序员
WeChat 文章列表页面（一）

WeChat 文章列表页面（一）

作者: Nian糕 | 来源:发表于2017-06-04 18:31 被阅读175次
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

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^

相关文章

  • WeChat 文章列表页面（一）

    本次的系列博文的知识点讲解和代码，主要是来自于 七月老师 的书籍《微信小程序开发：入门与实践》，由个人总结并编写，...

  • WeChat 文章列表页面（二）

    本次的系列博文的知识点讲解和代码，主要是来自于 七月老师 的书籍《微信小程序开发：入门与实践》，由个人总结并编写，...

  • Springboot＋Vue实现富文本发表文章功能

    案例功能效果图 前端编辑页面 文章列表页面 文章详情页面 环境介绍 前端：vue 后端：springboot jd...

  • 手撸博客4 写文章

    1 设计思路 在文章列表页面显示写文章按钮，点击写文章后进入新文章的编辑页面。 在具体文章页面显示编辑按钮，点击编...

  • flutter 路由与导航

    参考链接 1. 简单的导航跳转 第一个页面 第二个页面 main 列表跳转的小例子 文章的模型 文章列表 内容界面 实现

  • Vue 多窗口刷新

    描述： 有两个页面，文章列表页，文章新增页；需要文章新增之后，文章列表页进行刷新。 实现： 使用 window.o...

  • 手撸博客3 文章列表及文章

    1 设计思路 1.1 路由设计 /article路由到文章列表页面/article/aid路由到具体的文章页面 1...

  • dedecms织梦设置为动态静态页面和文章的方法

    设置dedecms为动态页面,设置dedecms为静态页面,首页动态,列表动态和文章 一、所有文章动态或静态的解决...

  • nodejs 常用包

    常用包列表 小程序 https://github.com/wechat-miniprogram

  • Django笔记11-分类页面与模板继承

    分类页面与模板继承 显示单一类别的文章列表 分类页面  分类页面与首页基本相同，但是显示的是指定类别的文章 模板 ...

网友评论

    本文标题：WeChat 文章列表页面（一）

    本文链接：https://www.haomeiwen.com/subject/ovemfxtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    小程序

    Web前端之路

    程序员

    微信小程序开发

    关于我们|服务条款|联系我们|WeChat 文章列表页面（一）|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！