【超详细】从1到2：初学者入门Demo内容列表页

发布：2018-01-25 17:22浏览：次来源：网络作者：tianshu

此帖承接从0 到1：初学者入门Demo，原计划内容是一个两个页面的小程序，现在暂时增加到三个页面，包括从0 到1：初学者入门Demo 篇中的欢迎页，该篇的内容列表页面，和下一篇的内容详情页面。

相信阅读过笔者从0到1 内容的同学，已经了解了小程序从无到有的过程，那么现在我们就直接来内容。

初学者通过该帖将学习到

0、小程序的基本组件 view、image、text、swiper
1、小程序推荐的布局方式 flex （本帖子重点使用）
2、小程序的请求API wx:request
3、小程序的模板化编程 template
4、小程序的列表渲染
5、小程序升级更新之后的新内容
6、建立一个页面的全过程：先骨架（wxml），再穿衣服（wxss），最后搞个小动作（js）
7、其他更多内容… …

8、体会前后端分离的开发过程：如何一步一步抽象 mock 数据，得到数据结构，并最终向服务器端获取对应结构的数据，直接用于视图层的渲染！
9、体会前后端分离的开发过程：如何一步一步抽象 mock 数据，得到数据结构，并最终向服务器端获取对应结构的数据，直接用于视图层的渲染！
10、体会前后端分离的开发过程：如何一步一步抽象 mock 数据，得到数据结构，并最终向服务器端获取对应结构的数据，直接用于视图层的渲染！

重要的事情说三遍！

展示效果

说明：和从0到1 之中有些许的配色变化！

准备

为了更好更流畅的学习这部分内容，请确保已经阅读过先导篇：从0 到1：初学者入门Demo。本文将一改从0 到1 中风格，不再细枝末节的阐述，只写重要内容，当然该填的坑依然会填。

在从0 到1 中，笔者从0 开始创建了一个欢迎页的内容，作为大家在小程序编程生涯中的 hello world小礼物。最终使用名为 toMina 的点击 tap 时间跳转到了 index 页面，index 展示的是一个下拉刷新和上拉加载更多的内容，这一部分我将暂时挖一个坑，在后续从4到5 专题帖中更加贴合实际的实现这个效果，大家期待一下吧。

废话不说，看看本文将带你完成什么吧！

内容列表页

这是一个文字展示内容的列表页面，主要由三个个部分组成：导航栏、上方的轮播图（一个轮播图，3个图片循环轮播）、下方的文与字简介内容（6个不同文与字的简介）。

原型设计图展示

[td]

轮播图	文与字简介

导航栏的

戴个帽子（json）：导航栏的背景色（#5B7896）和文字内容仅仅表现在当前页面中，因此设置在 index.json 文件中即可。自己动手完成吧。

轮播图实现

老规矩：先骨架（wxml），再穿衣服（wxss），最后搞个小动作（js），随便带个帽子（当前页面的json）

（1）构建 index.wxml 页面骨架，填充内容
index.wxml 中需要使用 swiper、view、image、text 组件，后三个组件已经在从0到1内容说明，不再赘述，直接开始 swiper 组件的说明（很重要的说明）：

a、swiper是一个轮播试图容器，其中只可以存放 swiper-item 组件，其余组件将会被自动删除；
b、swiper-item 应该仅仅作为轮播的一个子容器使用，并继承父容器的宽高设置。
c、swiper 在新版本中已经支持循环轮播了，只需要设置其属性 circular 为true即可；其实，还有一个隐藏的属性，官方文档没有，但是确实是有效果的：垂直轮播属性 vertical，需要时，设置为true 即可。

说明：笔者迄今为止介绍的最详细的也就是 swiper 轮播容器组件了，跟着我的魔鬼的步伐一步一步实现。PS：最终的代码是和官方案例一样的，但是你将会知道那是怎么来的，不信的话，继续看下去！！！

PPS：基本属性和时间还是需要各位去看官文的。哈哈

一个轮播图，3个图片循环轮播：

<view class="container">
<swiper class="post-swiper" circular="true" autoplay="true" indicator-dots="true">
<swiper-item>
<!-提示：不要纠结 image 的高度和宽度，实际发时，这个是大家试出来的，或者是UI给的-->
<image src="/imgs/wx.png" style="height:400rpx;width:100%" bindtap="onPostTap"/>
</swiper-item>
<swiper-item>
<image src="/imgs/vr.png" style="height:400rpx;width:100%"/>
</swiper-item>
<swiper-item>
<image src="/imgs/iqiyi.png" style="height:400rpx;width:100%"/>
</swiper-item>
</swiper>
<view class="post-item-container">
<view class="post-item">
这里是一个文与字简介的内容
</view>
<view class="post-item">
这里是一个文与字简介的内容
</view>
<view class="post-item">
这里是一个文与字简介的内容
</view>
</view>
</view>

上述完成之后得到的效果图是：

（2）页面骨架穿上衣服 index.wxss ，定义样式

设置 swiper 的宽高和 image 的宽高一致，实际开发中宽高上可以有所差异，比如：如果设置了 swiper 的高度比 image 高的话，会发现三个轮播点向下走了一点。具体自己玩玩吧。试试吧，电脑又不会爆炸！

/* index.css */
.post-swiper{
height:400rpx;
width:100%;
}
/*关于post-item的样式设计只是为了让大家清晰看到是不同的view分割，可先不设定*/
.post-item{
margin-top: 20rpx;
background-color:aquamarine;
border: 1px solid red;
}

（3）搞点小动作 index.js

轮播图存在的意义：除了展示，当然必须具有点击事件，这基本是真理了。想象一下，轮播图只是轮播图的话，你能忍吗？

某宝的轮播图，点击去的商品详情页。设置我们轮播图的点击事件，点击之后到文与字详情页面（使用从0到1中提及的快速创建page页的四个组成文件的小技巧，创建文与字详请页面 pages/index/post-detail/post-detail【文与字详情页的具体构建过程将在《从2到3》中完成】。

// pages/index/index.js
Page({
data:{},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onPostTap:function(event){
// 点击轮播图片之后后跳转到 post-detail 详情页
wx.navigateTo({
url: 'post-detail/post-detail'
})
}
})

（4）如何确认点击的轮播图是哪一个轮播图呢？又怎么知道跳转到谁的详情页呢？

你的名字和名片：在一个交际晚会上，那么多人递名片，你怎么让别人知道你是谁，又怎么联系你呢？哼简单，让别人记住你的名字，当别人需要联系你的时候，通过名字找到你的名片即可！（忽略同名的情况，如果你叫张伟的话，… …）

同样的，给每个轮播图添加一个“名字”，点击时通过“名字”确认发挥哪一个轮播图对应的详情页。在编程中确定唯一的标识，那就是 id 了。

非常重要的一点：小程序中，数据动态绑定是单向的，在逻辑层（js）中将需要绑定到的视图层（wxml）上的数据，通过 this.setData 设置到 data 中（PS：如果数据不需要传递到视图层的，建议不要设置到 data 中），视图层通过 {{}} 动态获取数据，实现局部渲染；那么问题来了，视图层（wxml）的数据变化怎么传递回逻辑层呢（js），答案是：通过事件监听。

这里介绍一种常用的小技巧，实现视图层向逻辑层的数据传递，特别适合点击到达详情页的场景中。步骤如下：

组件上设置一个事件（这是重要的前提）
需要传递到逻辑层的数据，将以 data- 开头的属性设置到已绑定事件的组件上（比如：data-post-id）
逻辑层从事件函数的 event 参数的 dataset 中获取视图层传递来的数据（比如：postId）

官方 dataset的说明：在组件中可以定义数据，这些数据将会通过事件传递给逻辑层。书写方式：以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType。（data-post-id => postId）

在 index.wxml 中，为 swiper-item 的 image 绑定点击事件 onPostTap ，并设置待传递到逻辑层的数据 data-post-id

<view class="container">
<swiper class="post-swiper" circular="true" autoplay="true" indicator-dots="true">
<swiper-item>
<!-提示：不要纠结 image 的高度和宽度，实际发时，这个是大家试出来的，或者是UI给的-->
<image src="/imgs/wx.png" style="height:400rpx;width:100%" bindtap="onPostTap" data-post-id="3"/>
</swiper-item>
<swiper-item>
<image src="/imgs/vr.png" style="height:400rpx;width:100%" bindtap="onPostTap" data-post-id="4"/>
</swiper-item>
<swiper-item>
<image src="/imgs/iqiyi.png" style="height:400rpx;width:100%" bindtap="onPostTap" data-post-id="5"/>
</swiper-item>
</swiper>
<view class="post-item-container">
<view class="post-item">
这里是一个文与字简介的内容
</view>
<view class="post-item">
这里是一个文与字简介的内容
</view>
<view class="post-item">
这里是一个文与字简介的内容
</view>
</view>
</view>