微信小程序之使用wx:for遍历循环
效果图如下:
实现代码如下:
type.js:
// pages/type/type.js
Page({ /**
* 页面的初始数据
*/
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 == ) { //访问正常
if (res.data.code == "") {
wx.showToast({
title: "删除成功,返回支出类型列表",
icon: 'success',
duration: ,
success: function () { wx.navigateTo({
url: '../type/type'
})
}
}) }
} else { wx.showLoading({
title: '系统异常',
fail
}) setTimeout(function () {
wx.hideLoading()
}, )
} }
}) } 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 %;
width: %;
} .thead .td{
border-top: none;
height: 140rpx;
line-height: 50rpx;
}
参考资料:
微信小程序之列表渲染
微信小程序之使用wx:for遍历循环的更多相关文章
- 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)
在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...
- 【微信小程序】调用wx.request接口需要注意的问题
写在前面 之前写了一篇<微信小程序实现各种特效实例>,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题.总的来说,收获了不少吧! 现在项目已经完成,还是要陆陆续续 ...
- 开发 | 微信小程序API-wx.setScreenBrightness/wx.getScreenBrightness
前言 最近接触了微信小程序 API - wx.setScreenBrightness .wx.getScreenBrightness 接口,调用该接口可以调节并显示手机屏幕亮度数据.对于喜欢腾讯新闻. ...
- 关于微信小程序遇到的wx.request({})问题
域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...
- 微信小程序开发 [05] wx.request发送请求和妹纸图
1.wx.request 微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下: wx.request({ url: 'test.ph ...
- 微信小程序web-view之wx.miniProgram.redirectTo
17年微信小程序官方提供了web-view组件. 官方描述:web-view组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 这段时间研究了一下小程 ...
- 微信小程序网络请求wx.request请求
最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api. 百牛信 ...
- 一,前端---关于微信小程序遇到的wx.request({})问题
域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...
- 微信小程序:使用wx.request()请求后台接收不到参数
问题描述: 微信小程序:wx.request()请求后台接收不到参数,我通过wx.request()使用POST方式调用请求,参数传递不到后台 解决方案: Content-Type': 'applic ...
随机推荐
- sqlserver 备份集中的数据库备份与现有的 'XXX' 数据库不同。
需求是将Ecology复制一份出来用于发布测试程序. 方案一 正确步骤 1.新建数据库Ecology2 2.选中Ecology2 点击右键:任务--还原--文件和文件组 选中源设备--点击右侧...按 ...
- PDF 补丁丁 0.6.2.3572 测试版发布
近日有网友反馈 3571 测试版的补丁丁无法正常工作.请下载新发布的 3572 版本.
- Flask--配置文件
配置文件 配置文件的方式有很多,下面介绍两种: 第一种:根据全局变量实现 App.py from flask import Flask, session app = Flask(__name__) # ...
- Jmeter配置元件
1.CSV Data Set Config Filename 参数化文件的路径 文件中的数据最后一行不能有空行,空行会被当做一个参数 若要进行分布式压测,可以将参数化文件放在jmeter的bin目 ...
- GNS3、Wireshark、SecureCRT 环境部署
本次GNS3环境部署教程基于官方推荐的稳定版1.5.4.初次接触此软件,详细的使用方法不是很清楚,所以以此作为学习记录,仅供参考,后期补充. 软件介绍 GNS3 GNS3是一款具有图形化界面可以运行在 ...
- opencv——图像掩码操作
使用opencv通过掩码去扣取图像中感兴趣的区域 步骤: 1.读取一张图片 2.转换颜色格式为hsv 3.设置要扣取区域颜色的上下门限 4.从原始图像中获取感兴趣区域的掩码 5.使用掩码和原始图像做云 ...
- 8、Python简单数据类型(int、float、complex、bool、str)
一.数据类型分类 1.按存值个数区分 单个值:数字,字符串 多个值(容器):列表,元组,字典,集合 2.按可变不可变区分 可变:列表[],字典{},集合{} 不可变:数字,字符串,元组().bool, ...
- Generator 函数和for...of循环,实现斐波那契数列
function* fib () { let [prev, cur] = [0,1] for (;;) { yield cur [prev, cur] = [cur, cur+prev] } } fo ...
- sort()函数中的key
d = { , , } #for k in d.items(): # print(k) content = list(d.items()) print(content) content.sort(ke ...
- [Codeforces 1242B]0-1 MST
Description 题库链接 给你一张 \(n\) 个点的完全图,其中有 \(m\) 条边长度为 \(1\),其余全为 \(0\).问你这张图的最小生成树为多少. \(1\leq n\leq 10 ...