小程式多排多列(grid)介面繪製,並獲取view對應的index引數
阿新 • • 發佈:2019-01-14
如果是你想要的效果,那看程式碼吧!
- .js
data: { routers: [ { name: '姓名', text: '輸入姓名', }, { name: '性別', text: '輸入性別', }, { name: '生日', text: '輸入生日', }, { name: '身高', text: '輸入身高', }, { name: '體重', text: '輸入體重', }, { name: '肩寬', text: '輸入肩寬', } ] },
- .wxml
<!-- grid 畫個重點--> <view class="grids"> <view class="grid" wx:for="{{routers}}" wx:key="index" wx:for-index="bindex"> <view> <view class='grid-bg' bindtap='clickTap' data-bindex='{{bindex}}'> <text class="grid-label2">{{item.text}}</text> <text class="grid-label">{{item.name}}</text> </view> </view> </view> </view>
- .css
.grids { position: relative; overflow: hidden; } .grids:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #d9d9d9; color: #d9d9d9; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .grids:after { content: " "; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #d9d9d9; color: #d9d9d9; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); } /* 睜大眼睛看這裡,尤其下面的width,50%是兩列,33.3333%是三列,25%是四列 */ .grid { position: relative; float: left; padding: 20px 10px; width: 50%; ====》》》》》看這裡,決定列數 box-sizing: border-box; } .grid:before { content: " "; position: absolute; right: 0; top: 0; width: 1px; bottom: 0; border-right: 1px solid #d9d9d9; color: #d9d9d9; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); } .grid:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid #d9d9d9; color: #d9d9d9; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .grid-bg { position: relative; float: left; padding: 0px 0px; width: 100%; box-sizing: border-box; } .grid-label2{ display: flex; justify-content: center; margin: 0 auto; font-size: 12px; color: rgb(187, 184, 184) } .grid-label { display: block; margin-top: 8px; text-align: center; font-weight: bold; color: rgb(116, 117, 116); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
- 獲取index,或者其他引數
現在從新看wxml裡的內容,看那個畫了重點的地方。
<view class="grid" wx:for="{{routers}}" wx:key="index" wx:for-index="bindex">
<view class='grid-bg' bindtap='clickTap' data-bindex='{{bindex}}'>
在這裡你會看到wx:for-index=“bindex”,以及下一層view裡的data-bindex=’{{bindex}}’,其實就是通過for-index的使用,進行index傳遞的,在對應的js檔案裡寫上bindtap所對應的方法:
clickTap: function(event) {
console.log(event)
console.log(event.currentTarget.dataset.bindex)
},
通過上面的console輸出日誌,你會發現
然後就可以根據,引數做不同對應的操作了。