最近小程序挺火的，于是我奉命弄弄小程序，好了废话不说，先实现个iOS里面最常见的tableview吧。

基础的我就不说了，想要实现tableview，首先先弄个滑动的 ，那就它了 scroll-view;

<pre class="has">
<code class="language-html language-plain">

有了框架，我们得弄里面的内容了，在微信小程序里，for循环就好了，看下面代码

<pre class="has">
<code class="language-html"><view wx:for="{{array}}" style="width:100%">

里面这一句比较厉害了 wx:for 这个就是小程序的for循环了。我们把数据卸载for的后面就好了 wx:for="{{array}}"，就像这样。官方原画是这样的：

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

我们用的就是列表渲染。

好了该细调一下里面的cell,像我这个就是一个图片集合，下面带着文字而已，ok，总体来说就酱（在wxml里）

<pre class="has">
<code class="language-html language-plain">

没有数据哇，数据在这呢（在.js里面）微信分的好清楚呢

数据习惯用

<pre class="has">
<code class="language-css language-plain">Page({
data: {}
})

来表示，data里面放我们在wxml定义的array了，整体的代码就是

<pre class="has">
<code class="language-javascript language-plain">Page({
data: {
array: [
"http://a.hiphotos.baidu.com/zhidao/pic/item/adaf2edda3cc7cd92d82d6b73b01213fb80e9135.jpg","http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg","http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"
]
},tapName:function(event){
console.log(event.target.dataset.img)
wx.navigateTo({
url: '../chakantu/chakantu?img='+event.target.dataset.img
})
}
})

我天下面的tapName是什么鬼，好吧这个是个点击事件，我们可以看见在wxml里面的image，里面有个

bindtap="tapName" data-img="{{item}}"

一个是点击事件，后面就是在.js里对应的方法名字，data-img是他想要传递的数据啊，这个微信官方好像只有传字符串，我还没找到传图片呢。

传给某个页面也就是这样子的

<pre class="has">
<code class="language-javascript language-plain"> url: '../chakantu/chakantu?img='+event.target.dataset.img

这确定不是get请求？

这个样子数据还正能过来。屌