您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)微信小程序中wx:for遍歷循環(huán)使用的示例分析,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
效果圖如下:
實(shí)現(xiàn)代碼如下:
type.js:
// pages/type/type.js Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ 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: '確認(rèn)要?jiǎng)h除該支出類型?', success: function (res) { if (res.confirm) { console.log('用戶點(diǎn)擊確定') 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) { //訪問(wèn)正常 if (res.data.code == "000000") { wx.showToast({ title: "刪除成功,返回支出類型列表", icon: 'success', duration: 3000, success: function () { wx.navigateTo({ url: '../type/type' }) } }) } } else { wx.showLoading({ title: '系統(tǒng)異常', fail }) setTimeout(function () { wx.hideLoading() }, 2000) } } }) } else if (res.cancel) { console.log('用戶點(diǎn)擊取消') } } }) }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { wx.setNavigationBarTitle({ title: "支出類型列表" }) var userCode = wx.getStorageSync('userId'); var self = this wx.request({ url: getApp().globalData.urlPath + "spendingType/types",//json數(shù)據(jù)地址 data: { userCode: userCode }, headers: { "Content-Type": "application/x-www-form-urlencoded" }, success: function (res) { self.setData({ types: res.data.data });//等同于 } }) }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 */ onUnload: function () { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { } })
type.js沒(méi)什么好說(shuō)的,如果要說(shuō),只能說(shuō)這個(gè)onLoad這里的onLoad就相當(dāng)于js中的onload方法,當(dāng)進(jìn)入該視圖時(shí),默認(rèn)全局加載一次。
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>列表數(shù)據(jù)</text> <text>\n</text> </view> <view class="table"> <view class="tr thead"> <view class="td">類型名</view> <view class="td">創(chuàng)建時(shí)間</view> <view class="td ">修改時(shí)間</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>
遍歷循環(huán)主要使用的是wx:for。如果要類比的話,我覺(jué)得jstl跟這個(gè)神似。先來(lái)看看jstl,代碼如下:
<c:forEach var="u" items="${user}"> <tr> <td>${u.cid}</td> <td>${u.cname}</td> <td>${u.age }</td> </tr> </c:forEach>
var相當(dāng)于我可以任意定義一個(gè)簡(jiǎn)要字母來(lái)調(diào)用item(item相當(dāng)于type.js中的data或self.setData存儲(chǔ)的數(shù)據(jù))。
如果你還不明白的話,可以聯(lián)系到$.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; }
關(guān)于“微信小程序中wx:for遍歷循環(huán)使用的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。