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

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

微信小程序 iOS tableview相关推荐

ios 上传图片失败小程序_微信小程序ios端使用ajaxSubmit上传图片失败，android没问题...
微信小程序ios端使用ajaxSubmit上传图片失败,android没问题微信小程序开发上传图片,使用ajaxsubmit,post请求,form设置multipart/form-data, a ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
微信小程序ios端唤醒不了拨打电话或者部分电话拨打不了解决方案
目录简介技术问题解决方案简介主要解决微信小程序ios端唤醒不了拨打电话或者部分电话拨打不了问题,使用安卓手机就可以轻松的唤醒拨打电话. 技术 uni-app前端小程序框架问题在调试微信 ...
解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...
微信小程序 ios自定义导航栏下拉“橡皮筋” 效果
问题: 1.微信小程序ios中如果自定义导航栏取消了橡皮筋效果页面无法滑动 2.如果不取消,页面往下拉时会与顶部有一大片空白(安卓本身scrollTop不会有负值) 3.fixed之后absolute ...
微信小程序ios滑动问题（滑动卡顿，下拉拖动自定义导航栏）
微信小程序ios滑动问题(滑动卡顿,下拉拖动自定义导航栏) 1.ios中个别机型类似6s ,对微信自带的scroll-view无法滑动: 解决:在滑动内容区添加css属性,overflow: auto ...
关于微信小程序iOS端时间格式兼容问题
关于微信小程序iOS端时间格式兼容问题在自己开发中,当时间格式为 2020-06-29 08:00 ,需要将时间转为其他格式时,Android端转换成功,iOS端报错或是转为NaN. 解决方法: 1 ...
微信小程序-ios计算器简易版
微信小程序-ios计算器图片: 核心代码 index.js: Page({ data: { value: null, // 上次计算后的结果,null表示没有上次计算的结果 displayValue ...
微信小程序iOS系统上echarts不能滑动的问题
在微信小程序中使用echarts插件的时候,遇到了一个问题:当系统是iOS时,如果手指先是长按图表,然后页面会无法滑动,其中南丁格尔玫瑰图尤其明显.作为一个微信小程序的新手开发,这个问题属实难倒我了. ...

微信小程序 iOS tableview

微信小程序 iOS tableview相关推荐

最新文章

热门文章