微信小程序 IOS tableview

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

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

<scroll-view scroll-y="true" style="height:100%" >
</scroll-view>

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

<view wx:for="{{array}}" style="width:100%">
</view>

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

在组件上使用

wx:for

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

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

index

，数组当前项的变量名默认为

item

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

<view>
<scroll-view scroll-y="true" style="height:100%" >
<view wx:for="{{array}}" style="width:100%">
<image id="{{index}}" mode="aspectFill" src="{{item}}" style="width:100%;height:250px" bindtap="tapName" data-img="{{item}}"></image>
<label style="width:100%;height:50px;font-family:'微软雅黑'">{{item}}</label>
</view>
</scroll-view>
</view>

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

数据习惯用

Page({
data: {}
})

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

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"
,
"http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"
,
"http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"
,
"http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"
,
"http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"
,
"http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.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是他想要传递的数据啊，这个微信官方好像只有传字符串，我还没找到传图片呢。

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

url: '../chakantu/chakantu?img='+event.target.dataset.img

这确定不是get请求？

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