微信小程序wx:for 的使用
在官方文档上看到wx:for是放在列表渲染里面讲的,
由此可以大概知道wx:for主要作用是列表,我们通常说list ,我想着就是相当于android这边的listview
recyclerview 吧.
看下文档
有一句非常重要的话
默认数组的当前项的下标变量名默认为 index
,数组当前项的变量名默认为 item
如果不想使用默认的可以使用wx:for-item 可以指定数组当前元素的变量名,
比如下面代码使用的item.××,不使用item也是可以的 wx:for-item需要定义一下然后就可以
替换里面的item了.
手写一个list试试
xml 代码如下
<view class='list_main' wx:for="{{list}}">
<view>
<image src='http://pl3g5zt02.bkt.clouddn.com/icon4.jpg' class='img'></image>
</view>
<view class="list_content">
<view>"{{item.content}}"</view>
<view>"{{item.confirm}}"</view>
</view>
</view>
wxss 代码调整下样式
.list_main{
display: flex;
flex-direction: row;
margin-top: 100rpx;
}
.img{
width: 150rpx;
height: 200rpx;
margin-left: 15rpx;
}
.list_content{
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 30rpx;
}
js里面 填写数据
/**
* 页面的初始数据
*/
data: {
list :[
{"content": "世界那么美好,好像出去走走","confirm":"我同意你想法"},
{ "content": "世界那么美好,好像出去走走", "confirm": "我同意你想法" },
{ "content": "世界那么美好,好像出去走走", "confirm": "我同意你想法" },
{ "content": "世界那么美好,好像出去走走", "confirm": "我同意你想法" },
{ "content": "世界那么美好,好像出去走走", "confirm": "我同意你想法" },
{ "content": "世界那么美好,好像出去走走", "confirm": "我同意你想法" }
]
},
运行效果图
但是下面有警告
看文档
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input>
中的输入内容,<switch>
的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。
wx:key
的值以两种形式提供
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 wx:key
,会报一个 warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
我写这个列表就是静态的,所有我忽略他了,如果看着不舒服,添加一个wx:key 即可.
微信小程序wx:for 的使用相关推荐
- 微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
- imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识 二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
- 微信小程序 wx.request 的封装
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下 ...
- 微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑 如何使用 第二个坑 如何使用 微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
- 微信小程序 wx.setstoragesync和wx.setstorage 区别
相同点: 微信小程序 wx.setstoragesync和wx.setstorage都是能把值保存在微信小程序缓存中,类似于浏览器的localstorage概念 区别: wx.setStorage是异 ...
- 微信小程序foreach遍历_微信小程序wx:for和wx:for-item的用法
微信小程序wx:for和wx:for-item的用法.兴弘海科技在微信小程序定制开发单门店系统的时候,在制作菜单的时候,需要体现左侧是菜单栏目,右侧是菜单名称列表的时候,遇到wx:for和wx:for ...
- 企业微信小程序wx.qy.login 的调用调试踩坑
企业微信小程序wx.qy.login 的调用调试踩坑 起步 在企业微信的开发过程中有很多坑,一切以企业微信开发文档为准. 近期我公司项目需要我联调开发企业微信小程序,以前没开发过,所以一切只能跟着企业 ...
- 解决微信小程序 wx.request 方法不支持 Promise 并发数问题
wx-promise-request 是微信小程序 wx.request 方法的不支持 Promise 和并发数问题的解决方案.如果只需要解决并发数问题,可以使用wx-queue-request.js ...
- 微信小程序wx.downloadFile()使用体验
微信小程序wx.downloadFile()使用体验 想给单位做一个小程序,实现模板文件下载的功能,方便办事群众把文件下载到手机上自行打印填写,也能提高办事效率. 不过想法是好的,截止目前2018年1 ...
- uniapp开发微信小程序 wx.navigateBack()携带数据问题
uniapp开发微信小程序 wx.navigateBack()携带数据问题 某个表单页面 有时需要跳转另一个页面查询数据 但如此想要保存当前页面数据需要在另一个查询页面调用 wx.navigateBa ...
最新文章
- java项目怎样提高性能_从代码的角度谈如何优化JAVA代码以提高性能【初、中级程序员必看】...
- 西安网络推广浅谈SEO优化旧内容页面能不能删?怎么删?
- 常见网络加速技术浅谈(二)
- 运行 命令 linux,Linux基本命令运行
- docker环境下的测试
- mysql8.0提示命令_Mysql 8.0 相关命令
- 68张机械原理动图,够你看一晚上了!
- 列举python中常用的数据类型_列举Python常用数据类型并尽量多的写出其中的方法...
- *p++,*(p++),(*p)++的区别
- Linux netfilter源码分析(2)
- python 调用gpu算力_数据科学家需要算力,GPU 如何实现?-控制器/处理器-与非网...
- 为了离去的纪念——google
- 推荐!可视化垃圾回收算法(转)
- App测试中ios和Android的区别2
- JDBC学习(三、DDL、DML和DQL)
- SQL window身份登陆 SQL server不能登陆
- 设计模式-工厂模式-3种-以手机制造工厂为例
- 谐振放大器工作点和阻抗
- 教职工使用计算机管理制度,关于教师办公室电脑使用与管理的规章制度
- Photoshop怎样快速调整画笔大小
热门文章
- 2022-2028年中国抗菌不锈钢行业研究及前瞻分析报告
- 【Sql Server】DateBase-SQL调整
- pytorch系列 -- 9 pytorch nn.init 中实现的初始化函数 uniform, normal, const, Xavier, He initialization...
- LeetCode简单题之数组中第 K 个独一无二的字符串
- LeetCode简单题之排列硬币
- 面试高频!JVM必备教程~
- 双圆弧插值算法(一)
- View绘制流程的入口
- html iso标准文档,HTML ISO-8859-1 参考手册
- java正则表达式 匹配%号_java正则表达式匹配带有括号的电话号为什么匹配不上...