微信小程序开发—(十二)列表
来源:互联网 发布:淘宝网毛衣货源 编辑:程序博客网 时间:2024/06/11 05:04
一.知识点
(一).列表渲染 wx:for
tip:wx:for=“array”可以等于参数名,在js中调用
Page({ data:{
array: [{name: '小李'},{ name: '小高'}]}
}),获取值;也可以直接把wx:for="{{[1, 2, 3]}}",把值放在上面
1.在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index
,数组当前项的变量名默认为item
<view wx:for="{{items}}"> {{index}}: {{item.message}}</view>
var app = getApp()Page({ data:{ items: [{ message: 'foo', },{ message: 'bar' }] }})
首先在wxml文件中wx:for后面的双重大括号中的items是一个数组,数组的元素如js中所见,在wx:for下面{{index}}:{{item.arry}}中index是items数组的下标,item.arry是数组中的元素也即是“a”和“b”。
2.使用wx:for-item
可以指定数组当前元素的变量名。使用wx:for-index
可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.name}}</view>
var app = getApp()Page({ data:{ array: [{ name: '小李', },{ name: '小高' }] }})
3.wx:for
也可以嵌套
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view></view>
都不需要js
(二).block wx:for
类似block wx:if
,也可以将wx:for
用在<block/>
标签上,以渲染一个包含多节点的结构块。
<block wx:for="{{array}}"> <view> {{index}}:{{item.name}}</view></block>
var app = getApp()Page({ data:{ array: [{ name: '小李', },{ name: '小高' }] }})
(三).wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/>
中的输入内容,<switch/>
的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
如不提供 wx:key
,会报一个 warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
二.案例
1.用户中心列表
<!--list.wxml--><block wx:for="{{userListInfo}}"><view class="weui_cell"><view class="weui_cell_hd"><image src="{{item.icon}}"></image></view><view class="weui_cell_bd"><view class="weui_cell_bd_p"> {{item.text}} </view></view><view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}</view><view class="with_arrow"></view></view></block>
/**list.wxss**/.weui_cell {position: relative;display: flex;padding: 15px;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-bottom: 1px solid #dadada;}.weui_cell_hd {display: inline-block;width: 20px;margin-right: 5px;}.weui_cell_hd image {width: 100%;height: 20px;vertical-align: -2px;}.weui_cell_bd {display: inline-block;}.weui_cell_bd_p {font-size: 14px;color: #939393;}.badge {position: absolute;top: 18px;right: 40px;width: 15px;height: 15px;line-height: 15px;background: #ff0000;color: #fff;border-radius: 50%;text-align: center;font-size: 8px;}.with_arrow {position: absolute;top: 18px;right: 15px;width: 15px;height: 15px;background-image: url(../../dist/images/icon-arrowdown.png);background-repeat: no-repeat;background-size: 100% 100%;}
//list.jsvar app = getApp()Page( { data: { userInfo: {}, userListInfo: [ { icon: '../../dist/images/iconfont-dingdan.png', text: '我的订单', isunread: true, unreadNum: 2 }, { icon: '../../dist/images/iconfont-card.png', text: '我的代金券', isunread: false, unreadNum: 2 }, { icon: '../../dist/images/iconfont-icontuan.png', text: '我的拼团', isunread: true, unreadNum: 1 }, { icon: '../../dist/images/iconfont-shouhuodizhi.png', text: '收货地址管理' }, { icon: '../../dist/images/iconfont-kefu.png', text: '联系客服' }, { icon: '../../dist/images/iconfont-help.png', text: '常见问题' }] }, onLoad: function() { var that = this //调用应用实例的方法获取全局数据 app.getUserInfo( function( userInfo ) { //更新数据 that.setData( { userInfo: userInfo }) }) }})
0 0
- 微信小程序开发—(十二)列表
- 微信小程序 开发列表
- Smobiler实现列表展示—GridView(开发日志十二)
- 微信小程序列表渲染开发
- 微信小程序开发(十二)富文本插件wxParse的使用
- 微信小程序开发 ---- 2 列表 详情
- 微信小程序开发(6)---列表渲染
- 微信小程序开发-新闻列表之新闻列表绑定
- 微信小程序开发-新闻列表之新闻列表绑定
- 微信小程序开发-新闻列表之新闻列表绑定
- 微信小程序开发-新闻列表之新闻列表绑定
- 程序开发 资源列表
- 十二、CascadingDropDown——级联下拉列表
- 程序十二
- 微信小程序开发常用技巧(6)——列表上拉加载更多
- 微信小程序开发-列表渲染和条件渲染
- 微信小程序开发阅读&电影小程序之(3)——新闻列表页面构建-数据绑定-for循环
- 微信小程序开发实战&电影小程序——阅读页面轮播图-新闻列表页面构建-数据绑定
- 二阶段提交,三阶段提交,Paxos
- 复习
- Linux基础
- MVC5+Unity4.0注入依赖学习
- [bzoj2127] happiness 最小割
- 微信小程序开发—(十二)列表
- 大前端
- java poi上传excel保存数据库
- python基础学习(八):字符串格式化
- angular 价格符号
- 汇编程序:将字符串中所有大写字符转为小写
- Visual Studio For Mac
- CSS自学教程--一天搞定CSS(终篇总结)
- ionic入门之深链接和延迟加载