小程序模板網

微信小程序仿IOS tableview及實現圖片縮放

發(fā)布時間:2018-03-30 15:43 所屬欄目:小程序開發(fā)教程
一:IOS tableview

最近小程序挺火的,于是我奉命弄弄小程序,好了廢話不說,先實現個iOS里面最常見的tableview吧。

基礎的我就不說了,想要實現tableview,首先先弄個滑動的 ,那就它了 scroll-view;

 

[plain] view plain copy
 
  1. <scroll-view scroll-y="true" style="height:100%" >  
  2. </scroll-view>  

有了框架,我們得弄里面的內容了,在微信小程序里,for循環(huán)就好了,看下面代碼

 

 

[html] view plain copy
 
  1. <view wx:for="{{array}}" style="width:100%">  
  2. </view>  
里面這一句比較厲害了 wx:for 這個就是小程序的for循環(huán)了。我們把數據卸載for的后面就好了 wx:for="{{array}}",就像這樣。官方原畫是這樣的:

 

 

在組件上使用wx:for控制屬性綁定一個數組,即可使用數組中各項的數據重復渲染該組件。

默認數組的當前項的下標變量名默認為index,數組當前項的變量名默認為item

我們用的就是列表渲染。

好了該細調一下里面的cell,像我這個就是一個圖片集合,下面帶著文字而已,ok,總體來說就醬(在wxml里)

 

[plain] view plain copy
 
  1. <view>  
  2.   <scroll-view scroll-y="true" style="height:100%" >  
  3.     <view wx:for="{{array}}" style="width:100%">  
  4.     <image id="{{index}}" mode="aspectFill" src="{{item}}" style="width:100%;height:250px" bindtap="tapName" data-img="{{item}}"></image>   
  5.     <label style="width:100%;height:50px;font-family:'微軟雅黑'">{{item}}</label>  
  6.     </view>  
  7.   </scroll-view>  
  8. </view>  
沒有數據哇,數據在這呢(在.js里面)微信分的好清楚呢

 

數據習慣用

[plain] view plain copy
 
  1. Page({  
  2.   data: {}  
  3. })  
來表示,data里面放我們在wxml定義的array了,整體的代碼就是

 

 

[plain] view plain copy
 
  1. Page({  
  2.   data: {  
  3.     array: [  
  4.      "http://a.hiphotos.baidu.com/zhidao/pic/item/adaf2edda3cc7cd92d82d6b73b01213fb80e9135.jpg"  
  5.     ,  
  6.     "http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"  
  7.     ,  
  8.     "http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"  
  9.     ,  
  10.     "http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"  
  11.     ,  
  12.     "http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"  
  13.     ,  
  14.     "http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"  
  15.     ,  
  16.     "http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"  
  17.     ,  
  18.     "http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"  
  19.     ,  
  20.     "http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"  
  21.     ,  
  22.     "http://d.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a13c8621b5ff103918fa0ecc011.jpg"  
  23.     ]  
  24.   },  
  25.   
  26.   tapName:function(event){  
  27.     console.log(event.target.dataset.img)  
  28.      wx.navigateTo({  
  29.       url: '../chakantu/chakantu?img='+event.target.dataset.img  
  30.     })  
  31.   }  
  32. })  


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/22974.html 復制鏈接 如需定制請聯系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢