小程序从轮播图到列表项(wx:for)–【浅入深出系列011】

微信目录集链接在此：

详细解析黑马微信小程序视频–【思维导图知识范围】	难度★✰✰✰✰

不会导入/打开小程序的看这里：参考

让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】

本系列校训

用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！
只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序（130集）
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下：
…
P303-微信小程序的环境准备08:21 00:00 到 05：16 获取APPid, 后面下载开发工具。

啥是wx:for

这个就是一个循环标签，感觉没法解释。
计算机比人优越的地方就是它可以循环，比如人用人脑来判断一下大致的选择，但是计算机可以用无限次循环来达到这个目的。
不过，循环里肯定要带着一些变化。比如颜色如下图1，比如 大小，如下图2

图1 颜色的变化 的循环

大小，或颜色，或形状的循环。

项目里的使用

轮播

其实，最先接触的 wx:for 就是轮播

最常见的轮播图代码

<swiper class="swiper_box" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange"
		 circular="circular">
			<block wx:for="{{banners}}" wx:key="id">
				<swiper-item>
					<image bindtap="tapBanner" data-id="{{item.businessId}}" src="{{item.picUrl}}_m" class="slide-image" />
				</swiper-item>
			</block>
		</swiper>

这是一般的小程序最常见的轮播图代码段。
用一个流程图来描述一下：

知识点复习

首先一点，如果你对小程序还是属于ABC阶段还是强列推荐看《让小程序动起来-轮播图的两种方式–【浅入深出系列003】》

swiper

具体请参见官方文档《微信官方文档. 小程序》 swiper一节
swiper
基础库 1.0.0 开始支持，低版本需做兼容处理。

微信 Windows 版：支持

微信 Mac 版：支持

渲染框架支持情况：Skyline （使用最新 Nighly 工具调试）、WebView

功能描述
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

通用属性
属性 类型 默认值 必填 说明 最低版本
indicator-dots boolean false 否 是否显示面板指示点 1.0.0
indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0
indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0
autoplay boolean false 否 是否自动切换 1.0.0
current number 0 否 当前所在滑块的 index 1.0.0
interval number 5000 否 自动切换时间间隔 1.0.0
duration number 500 否 滑动动画时长 1.0.0
circular boolean false 否 是否采用衔接滑动 1.0.0
vertical boolean false 否 滑动方向是否为纵向 1.0.0
display-multiple-items number 1 否 同时显示的滑块数量 1.9.0
easing-function string “default” 否 指定 swiper 切换缓动动画类型 2.6.5
合法值 说明
default 默认缓动函数
linear 线性动画
easeInCubic 缓入动画
easeOutCubic 缓出动画
easeInOutCubic 缓入缓出动画
bindchange eventhandle 否 current 改变时会触发 change 事件，event.detail = {current, source} 1.0.0
bindtransition eventhandle 否 swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}。Skyline 仅支持非 worklet 的组件方法作为回调。 2.4.3
bindanimationfinish eventhandle 否 动画结束时会触发 animationfinish 事件，event.detail 同上。Skyline 仅支持非 worklet 的组件方法作为回调。 1.9.0

wx:for

列表渲染
wx:for
官方的帮助地址这里：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html#block%20wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

上面的循环对应于这样的数据：

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

{{idx}}: {{itemName.message}} wx:for 也可以嵌套，下边是一个九九乘法表 {{i}} * {{j}} = {{i * j}}

block wx:for

类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property
的值需要是列表中唯一的字符串或数字，且不能动态改变。 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要
item 本身是一个唯一的字符串或者数字。 当数据改变触发渲染层重新渲染的时候，会校正带有 key
的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

好好分析一下官方的这个文档

wx:for 用于单纯的数组循环。一般数组的元素是数字或字符串 。

wx:for-item=‘变量名（随便起的）’ 它是指定循环数据当前的变量名，可以通过 {{变量名.属性}} 展示数组的元素。

wx:for-index=‘变量名（随便起）’，相当于给子元素起别名，如果缺省，默认值是 item，如果设置 wx:for-item=‘aName’，则可以在循环中通过 {{aName.属性名}} 来访问子元素的属性值。 如果没有这个wx:for-index，则访问的时候要像数组一样带下标。

例如，我要循环打印这个数组

那么，首先就是 wx:for=“{{GoodNumber}}” 其次，可以为变量取别名，比如说我觉得GoodNumber太长了，我可以用 wx:for-item=“Goods” 来简化它

<block wx:for="{{GoodNumber}}" wx:for-item="Goods">
        <van-card num="{{ Goods.number }}" price="{{ Goods.price }}" desc="{{ Goods.desc }}" title="{{ Goods.name }}" thumb="{{ Goods.imageURL }}" />
 </block>

本例的代码

页面数据

Page({
  data: {
    poetries: [{
        name: "行路难",
        snippet: "长风破浪会有时,直挂云帆济沧海"
      },
      {
        name: "雨过山村",
        snippet: "雨里鸡鸣一两家，竹溪村路板桥斜。"
      },
      {
        name: "荆门西下",
        snippet: "一夕南风一叶危，荆云回望夏云时。"
      },
    ]
  },

  viewBindtap: function(e) {
    var poetryIndex = e.currentTarget.dataset.poetryindex;
    console.log(this.data.poetries[poetryIndex].name);
  },
});

页面

<view>
  <view class="label">
    <text style="color:#ff0000">wx:for:用法</text>
  </view>
  <view class="control">
    <view wx:for="{{ poetries }}" wx:for-index="poetryIndex" bindtap="viewBindtap" data-poetryIndex="{{ poetryIndex }}">
    <image src="../../images/shu.jpg"></image>
      <view>{{ poetries[poetryIndex].name }}</view>
      <view>{{ poetries[poetryIndex].snippet }}</view>
      <view style="height:2px;background-color:#ffccff"></view>
      <view style="height:4px;background-color:#ffffff"></view>
      
    </view>
  </view>
</view>

效果图

这个例子可以说是最接近于项目的代码的无后端的代码了。毕竟不是每一个初学者都是有着良好的springBoot的基础。这也是为什么不推荐初学者，直接使用复杂例子的原因。看不动，一改N个错，那还怎么学习？
不得不流下伤心而又无奈的泪水。IT的程序员门槛貌似很低，但是从理解代码的角度上，从来不是各专业TOP！比啥啥电子的与非门，比啥啥信号的频域，傅立叶变换都难很多。
啥？你都没听说过？ 呃，其实我也啥都没说，只说：加油，奥利给！

友情提示 可以使用资源管理器里的搜索功能，真的很好用。
其实，除了接口的部分跟PHP的有一点点不一样，前端的部分基本上就是不动的。

JSP后端PHP后端等

其实这个后端，只是一个轮播图，或者是列表的话，springboot, Jsp, PHP都差不多。
但是我还是打算写成不同的文章，
一个原因是学微信小程序的人可能只会其中一种。没有我这么全才的嘛，
另一个原因就是，这样看上去水三篇文章是不是感觉上要好很多？经验加1一下子变成了

呃，好象是如果再加上页面里的这种JS数据的，一共就可以水4篇了。经验+3 普拉思呀

这全套的活一整套下来

这不得整个大鸡腿？

配套资源

后端
小程序轮播图的两种后台方式(jsp)-jsp
https://download.csdn.net/download/dearmite/88111567
前端
小程序从轮播图到列表项(wx:for)–【浅入深出系列011】
https://download.csdn.net/download/dearmite/88211197

另外，本例中使用的鼠标指针方案是我最常用，最喜欢的方案

霓虹线条鼠标指针方案资源下载
https://download.csdn.net/download/dearmite/88211804

作业：

1 下载本文资源，将图片也用wx:for循环成不同的图片。
2 使用本例数组，将其放入案例的js中。并用页面展示出来

3 任选JSP后台，PHP后台，springBoot 后台，完成微信小程序的列表 （难度★★★★✫）