這篇文章主要介紹了微信小程序 wx:for遍歷循環使用實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
效果圖如下:
實現代碼如下:
type.js:
// pages/type/type.jsPage({ /** * 頁面的初始數據 */ data: { types: "" }, editType: function (e) { var typeId = e.currentTarget.dataset['id']; console.log("edit:"+typeId); wx.navigateTo({ url: '../type_edit/type_edit?typeId=' + typeId }) }, delType:function(e){ var typeId = e.currentTarget.dataset['id']; console.log("delete:"+typeId) wx.showModal({ title: '提示', content: '確認要刪除該支出類型?', success: function (res) { if (res.confirm) { console.log('用戶點擊確定') wx.request({ url: getApp().globalData.urlPath + "spendingType/delete", method: "POST", data: { typeId: typeId }, header: { "Content-Type": "application/x-www-form-urlencoded" }, success: function (res) { console.log(res.data.code); if (res.statusCode == 200) { //訪問正常 if (res.data.code == "000000") { wx.showToast({ title: "刪除成功，返回支出類型列表", icon: 'success', duration: 3000, success: function () { wx.navigateTo({ url: '../type/type' }) } }) } } else { wx.showLoading({ title: '系統異常', fail }) setTimeout(function () { wx.hideLoading() }, 2000) } } }) } else if (res.cancel) { console.log('用戶點擊取消') } } }) }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { wx.setNavigationBarTitle({ title: "支出類型列表" }) var userCode = wx.getStorageSync('userId'); var self = this wx.request({ url: getApp().globalData.urlPath + "spendingType/types",//json數據地址 data: { userCode: userCode }, headers: { "Content-Type": "application/x-www-form-urlencoded" }, success: function (res) { self.setData({ types: res.data.data });//等同于 } }) }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { }})type.js沒什么好說的，如果要說，只能說這個onLoad這里的onLoad就相當于js中的onload方法，當進入該視圖時，默認全局加載一次。
type.wxml:
<view> <view> <navigator url="/pages/type_add/type_add" hover-class="navigator-hover">添加支出類型信息</navigator> </view> <view> <text>/n</text> </view> <view> <view> <text>列表數據</text> <text>/n</text> </view><view class="table"> <view class="tr thead"> <view class="td">類型名</view> <view class="td">創建時間</view> <view class="td ">修改時間</view> <view class="td">備注</view> <view class="td ">操作</view> </view> <block> <view class="tr" wx:for="{{types}}" wx:for-item="item"> <view class="td">{{item.typeName}}</view> <view class="td">{{item.createDate}}</view> <view class="td">{{item.modifyDate}}</view> <view class="td">{{item.remark}}</view> <view class="td"> <text bindtap='editType' data-id="{{item.typeId}}">編輯</text> <text>/n</text> <text>/n</text> <text bindtap='delType' data-id="{{item.typeId}}">刪除</text> </view> </view> </block> </view> </view></view>遍歷循環主要使用的是wx:for。如果要類比的話，我覺得jstl跟這個神似。先來看看jstl,代碼如下:
<c:forEach var="u" items="${user}"> <tr> <td>${u.cid}</td> <td>${u.cname}</td> <td>${u.age }</td> </tr></c:forEach>var相當于我可以任意定義一個簡要字母來調用item(item相當于type.js中的data或self.setData存儲的數據)。
如果你還不明白的話，可以聯系到$.each,代碼如下:
$.each(classroom_list, function(i, c) { rows = rows + "<tr>"; rows = rows + "<td>" + c.id + "</td>"; rows = rows + "<td>" + c.nickname + "</td>"; rows = rows + "<td><a href='student_submit_info.html?userId="+c.id+"'>查看詳情</a></td>"; rows = rows + "</tr>"});type.wxss:
.table { border: 1px solid #ccc; font-size: 28rpx; background: #fff; border-right: none;} .tr{ display: flex; justify-content: space-between;} .td { text-align: center; border: 1px solid #ccc; display: inline-block; border-left: none; border-bottom: none; padding: 10rpx 1%; width: 12%;} .thead .td{ border-top: none; height: 140rpx; line-height: 50rpx;}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
