微信小程序 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请求？

 

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