微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染

这篇具有很好参考价值的文章主要介绍了微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

导航路线

关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有想学习的可以按照以下顺序查看
1.微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)
2.微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染
3.微信小程序wxss相关介绍、全局配置和tabbar知识以及发送网络数据请求(post,get)
4.微信小程序页面导航、编程式导航、页面事件、生命周期和WXS脚本
5.微信小程序自定义组件、组件的生命周期和组件通信(插槽)
6.微信小程序使用npm包、全局数据共享和分包

1.数据绑定的基本原则

  1. 在data中定义数据
  2. 在wxml中使用数据
在data中定义页面的数据

在页面对应的.js文件中,把数据定义到data对象中即可

Page({
	data:{
		//字符串类型的数据
		info:'init data',
		//数组类型的数据
		msgList:[{msg:'hello'},{msg:'world'}]
	}
})

Mustache语法的格式
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。语法格式为:

<view> {{要绑定的数据名称}} </view>

Mustache语法的应用场景

  • 绑定内容
  • 绑定属性(如图片的src属性)
  • 运算(三元运算,算术运算等)

绑定属性案例

Page({
	data:{
		info:'https://xiaoji.img',
	}
})
<image src="{{info}}"></image>

三元运算案例

Page({
	data:{
		randomNum:Math.random() * 10, //生成10以内的随机数
	}
})
<view>{{ randomNumber >=5 ? '随机数大于五' : '随机数小于五'}}</view>

2.事件绑定

事件的概念:
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
小程序中常用的事件

类型 绑定方式 事件描述
tap bindtap或 bind:tap 手指触摸后马上离开,类似于HTML中的click事件
input bindinput 或 bind:input 文本框输入事件
change bindchange或 bind:change 状态改变时触发

事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象event,它的详细属性如下表所示:

属性 类型 说明
type String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息
touches Array 触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件,当前变化的触摸点信息的数组

上面加粗的可以重点关注一下
target和currentTarget的区别:
target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件(类似html的事件委托,currentTarget为父组件,target就是子组件,子组件向外冒泡到父组件身上,父组件身上绑定了事件,此时这个事件的e.target就是内部子组件,e.currentTarget就是当前的绑事件的父组件)
微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染

bingtap的语法格式:

在小程序中,不存在html中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为.

  1. 通过bingtap,可以为组件绑定tap触摸事件,语法如下:
<button type='primary' bindtap='btnTapHandler'>打印事件对象</button>
  1. 在页面的.js文件中定义对应的事件处理函数,事件参数通过形参event(一般简写成e),来接收:
Page({
	btnTapHandler(e){
		//上面按钮的tap事件处理函数
		console.log(e) //事件参数对象 e
	}
})

在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值,示例如下:

//页面中的.js文件
Page({
	data:{
		count:0
	},
	//修改count的值
	changeCount(){
		this.setData({
			count:this.data.count+1
		})
	}
})
<button type='primary' bindtap='changeCount'>+1</button>

事件传参

小程序中的事件比较特殊,不能在绑定事件的同时为事件处理函数传递参数,例如,下面代码将不能正常工作:

<button type=""primary bindtap='btnHandler(123)'>事件传参</button>

因为小程序会把 bindtap的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123)的事件处理函数。

可以为组件提供data-自定义属性传参,其中代表的是参数的名字,示例代码如下(里面的{{}}不能省略,不然得到的参数就是一个普通的字符串了):

<button type=""primary bindtap='btnHandler' data-info="{{234}}">事件传参</button>

最终:

  • info会被解析为参数的名字
  • 数值⒉会被解析为参数的值

获取参数值
在事件处理函数中,通过event.target.dataset.参数名即可获取到具体参数的值,
示例代码如下:

btnHandler(event){
	//dataset 是一个对象,包含了所有通过data-* 传递过来的参数项
	console.log(event.target.dataset)
	//通过dataset 可以访问到具体的值
	console.log(event.target.dataset.info)
}

bindinput的语法格式

在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:

  1. 通过binginput,可以为文本框绑定输入事件
<input bindinput="inputHandler"></input>
  1. 在页面的.js文件中,定义事件处理函数
inputHandler(e){
	//e.detail.value 是变化过后,文本框最新的值
	console.log(e.detail.value)
}
实现文本框和data之间的数据同步

实现步骤:

  1. 定义数据
  2. 渲染结构
  3. 美化样式
  4. 绑定input事件处理函数
1.定义数据
Page({
	data:{
		msg:'你好'
	}
})
2.渲染结构
<input value="{{msg}}" bindinput="inputHandler"></input>
3.美化样式
input{
	border:1px solid #eee;
	padding:5px;
	margin:5px;
	border-radius:3px;
}
4.绑定input事件处理函数
inputHandler(e){
	//e.detail.value 是变化过后,文本框最新的值
	//console.log(e.detail.value)
	this.setData({
		msg:e.detail.value
	})
}

3.条件渲染

在小程序中,使用wx:if="{{condition}}”来判断是否需要渲染该代码块:

<view wx:if="condition">True</input>

也可以用wx:elif 和 wx:else来添加else 判断:

<view wx:if="{{type===1}}"></input>
<input wx:elif="{{type===2}}"></input>
<view wx:else>保密</view>

结合block使用wx:if

如果要一次性控制多个组件的展示与隐藏,可以使用一个< block> < /block>标签将多个组件包装起来,并在< block>标签上使用wx:if控制属性,示例如下:

<block wx:if="{{true}}">
	<view>view1</view>
	<view>view2</view>
</block>

注意:< block>并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染(也可以使用其他的块包裹,但是其他的块会被渲染到页面上)

hidden

在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏

<view hidden="{{condition}}"> 条件为true隐藏,false显示 </view>
wx:if与hidden的对比
  1. 运行方式不同
    • wx:if以动态创建和移除元素的方式,控制元素的显示和隐藏
    • hidden以切换样式的方式(display:none/block),控制元素的显示与隐藏
  2. 使用建议
    • 频繁切换时,建议使用hidden
    • 控制条件复杂时,建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

4.列表渲染

通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:

<view wx:for="{{array}}">
	索引是:{{index}} 当前项是:{{item}}
</view>

默认情况下,当前循环项的索引用index表示;当前循环项用item表示

手动指定索引和当前项的变量名*(了解即可)

  • 使用wx:for-index可以指定当前循环项的索引的变量名
  • 使用wx:for-item可以指定当前项的变量名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
	索引是:{{idx}} 当前项是:{{itemName}}
</view>

wx:key的使用

类似于Vue列表渲染中的:key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key值,从而提高渲染的效率,示例代码如下:文章来源地址https://www.toymoban.com/news/detail-495560.html

//data 数据
data:{
	userlist:[
		{id:1,name:"小红"},
		{id:2,name:"小黄"},
		{id:3,name:"小白"}
	]
}


//wxml结构,wx:key里面不需要Mustache语法,不然报错
<view wx:for="{{userlist}}" wx:key="id">{{item.name}}</view>

到了这里,关于微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录

    数据绑定的基本原则:在data中定义数据,在wxml中使用数据 1.1. 在data中定义数据 在data中定义数据,找到页面对应的.js文件,然后把数据定义到data中即可。 pages/list/list.js 1.2. 在wxml中渲染数据 (mustache语法) mustache语法,插值表达式 将data中的数据绑定到页面中渲染,使用mu

    2024年02月13日
    浏览(50)
  • 微信小程序数据绑定和事件触发

    数据绑定和修改 微信小程序数据绑定是指将数据和视图进行关联,当数据发生变化时,视图也会相应地发生变化。微信小程序数据绑定主要有以下几种方式: 双向绑定:双向绑定是指数据和视图之间的双向关联,当数据发生变化时,视图也会相应地发生变化,反之亦然。在

    2024年02月10日
    浏览(61)
  • 微信小程序------WXML模板语法之条件渲染和列表渲染

    目录 前言 一、条件渲染 1.wx:if 2. 结合 使用 wx:if 3. hidden 4. wx:if 与 hidden 的对比 二、列表渲染 1. wx:for 2. 手动指定索引和当前项的变量名* 3. wx:key 的使用         上一期我们讲解wxml模版语法中的数据绑定和事件绑定(上一期链接:微信小程序-----WXML模板语法之数据绑定与事件

    2024年01月16日
    浏览(57)
  • 微信小程序:tabbar、事件绑定、数据绑定、模块化、模板语法、尺寸单位

    目录 1. tabbar 1.1 什么是tabbar  1.2 配置tabbar  2. 事件绑定 2.1 准备表单 2.2 事件绑定 2.3 冒泡事件及非冒泡事件  3. 数据绑定 3.1 官方文档 4. 关于模块化 5. 模板语法 6. 尺寸单位 下图中标记出来的部分即为tabbar:    官方说明文档:   说明: pagePath中指定的页面,必须在app.jso

    2024年02月04日
    浏览(58)
  • 【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月05日
    浏览(43)
  • 微信小程序(二)--- 数据绑定,事件绑定,全局配置window,tabBar,网络数据请求,request合法域名,GET,POST

    目录 一、WXML模板语法 1、数据绑定 (1)Mustache语法 2、事件绑定  (1)常用事件  (2)属性列表  (3)target和currentTarget的区别  (4)bindtap语法格式  (5)在事件处理函数中为data中的数据赋值 (6)事件传参 (7)bindinput的语法格式 (8)实现文本框(input)和data之间的数

    2024年02月04日
    浏览(46)
  • 微信小程序事件绑定

    事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。 当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示。 target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。 点击内

    2023年04月08日
    浏览(47)
  • 微信小程序(二)事件绑定

    注释很详细,直接上代码 上一篇 新增内容: 点击事件绑定 注册页面 设置页面初始化数据 事件处理函数的实现 更新数据并更新视图 源码: index.wxml index.js 效果演示: 按钮点击前 按钮点击后 下一篇

    2024年01月17日
    浏览(32)
  • 【微信小程序】一文解忧,事件绑定

    🍒 观众老爷们好呀,小程序系列的新文章又来啦,即使是暑假也不能停止学习呀!上文我们详细了解了微信小程序WXML模板语法中的数据绑定,小程序中的事件绑定也是我们必须掌握的方法。 🍒 那么现在我们就开始学习吧,小本本快拿出来记笔记呀。 首先我们来理清事件的

    2024年02月02日
    浏览(40)
  • 【小程序教程】微信小程序之事件绑定

    微信小程序的事件绑定是非常重要的一部分,它可以让我们的小程序与用户进行交互,实现各种功能,例如点击按钮、滑动页面、输入内容等等。本篇博文将详细介绍微信小程序如何进行事件绑定,并且给出相关的代码示例,方便大家理解。 在微信小程序中,通过在标签上绑

    2024年02月04日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包