微信小程序开发-列表渲染和条件渲染

数据绑定我就不说,看看官方文档就行了,主要就注意下this.setData({})改变数据值就行。

一、列表渲染

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

block并不会渲染出来

wx:key项目的唯一标识符,一般来说最好设置一个挺不错的,免得报warning

下面直接上例子:

wxml:

< view >
< block wx:for= "{{infoList}}" wx:for-item= "item" wx:for-index= "index" wx:key= "nameList">
< view class= 'section'>
< view >{{index}} </ view >
< view >用途:{{item.name}} </ view >
< view >电话:{{item.phone}} </ view >
</ view >
</ block >
</ view >
js:

Page({
data:{
infoList:[{
phone: 110,
name: "报警电话"
},{
phone: 119,
name: "火警电话"
}, {
phone: 120,
name: "急救电话"
}
]
}
})
Tip:值得注意的一点就是花括号{}和引号""之间如果有空格会被解析成字符串。

二、条件渲染

我的理解就是根据条件判断是否渲染,每次改变条件的结果都会重新渲染一次。

block和列表渲染一样,不会渲染到视图里面

wx:if里面的条件判断为true时渲染显示,false时不渲染

wxml:

< button bindtap= 'changeView' type= 'primary'>切换状态 </ button >
< view wx:if= "{{info == true}}">
< block wx:for= "{{infoList}}" wx:for-item= "item" wx:for-index= "index" wx:key= "nameList">
< view class= 'section'>
< view >用途:{{item.name}} </ view >
< view >电话:{{item.phone}} </ view >
</ view >
</ block >
</ view >
JS:

Page({
data:{
infoList:[{
phone: 110,
name: "报警电话"
},{
phone: 119,
name: "火警电话"
}, {
phone: 120,
name: "急救电话"
}
],
info: true
},
changeView: function(){
var info = this.data.info;
this.setData({
info:!info
})
}
})
wx:if和hidden的异同:

相同点:都可以控制元素的显示与否

不同点:

1、wx:if判断条件是true时显示,hidden是遇到false时显示;

2、wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现

因此在官方文档中会说频繁切换显示隐藏的话wx:if消耗更多资源。因为它每次显示都会渲染,隐藏就销毁。

总结条件渲染就是:频繁切换用hidden,偶尔切换用wx:if



好的,关于微信小程序条件列表渲染,我可以给你一些简单的介绍。 在微信小程序中,可以通过条件列表渲染来展示符合特定条件的数据列表,例如根据用户输入的关键字搜索匹配的数据。具体实现方法如下: 1. 首先,需要在小程序中定义一个列表变量,用于存储符合条件的数据列表。 ``` data: { list: [] } ``` 2. 接着,在小程序中定义一个输入框和一个搜索按钮,用于接收用户输入的关键字并触发搜索操作。 ``` <view> <input bindinput="inputChange" placeholder="请输入关键字" /> <button bindtap="search">搜索</button> </view> ``` 3. 在搜索按钮的事件处理函数中,可以通过 wx.request 发送请求获取符合条件的数据列表,并将数据列表存储到列表变量中。 ``` search: function () { var that = this; wx.request({ url: 'http://xxx.com/search', data: { keyword: that.data.keyword }, success: function (res) { that.setData({ list: res.data.list }) } }) } ``` 4. 最后,在小程序中定义一个条件列表,通过 wx:if 判断列表是否为空,如果不为空,则通过 wx:for 渲染数据列表。 ``` <view wx:if="{{list.length > 0}}"> <view wx:for="{{list}}"> <text>{{item.title}}</text> </view> </view> <view wx:else> <text>暂无数据</text> </view> ``` 通过以上方法,就可以实现微信小程序中的条件列表渲染。 需要注意的是,为了保证用户体验,应该在用户输入关键字后自动触发搜索操作,在搜索过程中应该显示加载提示等反馈信息,以提高用户的使用体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值