|
最近小程序挺火的，于是我奉命弄弄小程序，好了废话不说，先实现个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请求？
这个样子数据还正能过来。屌
?
? （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
