微信小程序仿IOS tableview及实现图片缩放
- 作者: admin
- 发布于 2018-06-25 14:11:43
- 来源:
- 栏目:解决方案
导语: 一:IOS tableview 最近小程序挺火的,于是我奉命弄弄小程序,好了废话不说,先实现个iOS里面最常见的tableview吧。
一: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里面)微信分的好清楚呢
数据习惯用
来表示,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
- })
- }
- })
-
|
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。