258资源分享网

一：IOS tableview

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

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

[plain] view plain copy

 

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

</scroll-view>  

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

[html] view plain copy

 

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

</view>  

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

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

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

我们用的就是列表渲染。

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

[plain] view plain copy

 

<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里面）微信分的好清楚呢

数据习惯用

[plain] view plain copy

 

Page({  

  data: {}  

})  

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

[plain] view plain copy

 

Page({  

  data: {  

    array: [  

     ""  

    ,  

    ""  

    ,  

    ""  

    ,  

    ""  

    ,  

    ""  

    ,  

    ""  

    ,  

    ""  

    ,  

    ""  

    ,  

    ""  

    ,  

    ""  

    ]  

  },  

  

  tapName:function(event){  

    console.log(event.target.dataset.img)  

     wx.navigateTo({  

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

    })  

  }  

})