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。