wx小程序的数据绑定和控制渲染

wx小程序的数据绑定和控制渲染

一、wxml 页面输出函数

<view>
	<!-- 展示方法的 输出 与 data中的数据表的拼接 -->
	<!-- message  data中定义的 数据 -->
    <view>{{fooo.addPostfix(message)}}</view>
</view>

<!-- <wxs></wxs> 相当于html中的script标签 ，在里面可以定义一些行内的脚本  -->

<wxs module="fooo">
  // 这里可以导出一个对象，这个对象可以直接在页面上使用
  // 这里的代码 必须遵循 common js 的规范
  // 每个<wxs></wxs> 内部都有单独的作用域
  module.exports = {
    // 页面上要是用的函数
    addPostfix:function(input){
      return input + "+" + "拼接的字符串"
    }
  }
</wxs>

页面渲染效果：

二、{{ 小胡子语法的输出}}

1.小胡子语法里面可以进行简单的计算输出

<text> {{ 1 + 1 }} </text> // 输出 2

2.小胡子语法里面输出的是 值得类型

<checkbox checked={{ true }} ></checkbox> // 复选框 选中

小程序中的 条件渲染

// -----------------子页面js代码
page({
	data:{
		// 定义 isLoading
		isLoading:true
	},
	onReady(){
		// 页面准备好，改变isLoading的值
		setTimeout(()=>{
			this.setData({ isLoading:false })
		},2000)
	}
})

一、wx:if (页面不频繁切换的情况)

<view wx:if="{{isLoading}}">
	<text> loading... </text>
</view>
// <view wx:elif="">
//	 <text> loading else-if</text>
// </view>
<view wx:else>
	<text> loading done </text>
</view>

二、hidden (页面频繁切换的情况)

<view hidden ="{{isLoading}}">
	<text> loading... </text>
</view>
<view hidden ="{{!isLoading}}">
	<text> loading done </text>
</view>

三、block 标签 一个条件控制多个元素渲染

<view>
	<!-- block 标签 只是一个包装元素，不会对页面结构产生任何影响 -->
	<block wx:if="{{isLoading}}">
		<text> 隐藏元素1 </text>
		<text> 隐藏元素2 </text>
	</block>
	<text> 不隐藏的元素 </text>
</view>

四、列表渲染

// -----------------子页面js代码
page({
	data:{
		students:[
			{id:1,name:zhangsan1,age:11},
			{id:2,name:zhangsan2,age:12},
			{id:3,name:zhangsan3,age:13},
			{id:4,name:zhangsan4,age:14},
		]
	}
})

<view>
	<!-- wx:key 属性值 写的是 遍历的数据单项 -->
	<!-- wx:key="{{item.id}}"  是错误写法 -->
	// 如果数组成员没有属性,例如: [1,2,3,4],可以通过 *this 这个保留值指定当前被遍历的元素  wx:key=" *this "
	<view wx:for="{{students}}" wx:key="id">
		// 可以直接拿到 索引index
		<text>索引:{{index}}</text>
		<text>name:{{item.name}}</text>
		<text>age:{{item.age}}</text>
	</view>
</view>


// 注意:小程序 默认渲染的循环变量 (索引)必须是 item (index) , 如果和data中定义的变量冲突，可以重新定义循环变量 (索引) item (index)
<view>
	// 将循环变量的item 定义为 ss
	// 将索引index 定义为 dd
	<view wx:for="{{students}}"  wx:key="id" wx:for-item=" ss " wx:for-item=" dd">
		// 可以直接拿到 索引index
		<text>索引:{{dd}}</text>
		<text>name:{{ss.name}}</text>
		<text>age:{{ss.age}}</text>
	</view>
</view>

备注：小程序中的 this.setData({ key ：value })

介绍：setData(Object ) 函数主要用于将逻辑层数据发送到视图层，同时对应的改变this.data.x的值。

参数：Object 以 key : value 的形式表示，将 this.data 中的 key 对应的值改变成 value。