百度小程序-交互

Data: 2019-09-21 17:16:36Form: JournalClick: 0

# 交互

# 一、数据交互（初始数据）

data 是页面第一次渲染使用的初始数据。
页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
可以在内进行简单的运算，数据绑定

js示例：

Page({
    data: {
        title: '射雕',
        array: [
            {'id':1,'name':'欧阳克'},
            {'id':2,'name':'黄蓉'},
            {'id':3,'name':'郭靖'}
        ]
    }
})

swan示例：

<view>标题：{{ title }}</view>
<view>ID：{{ array[0].id }} --- 姓名：{{ array[0].name }}</view>

# 二、字符串运算

<view>{{ '欧阳克'+'黄蓉' }}</view>

# 三、算数运算

<view>{{ 1+1 }}</view>

# 四、三元运算

js示例：

Page({
    data: {
        title: '射雕'
    }
})

swan示例：

<view>姓名：{{ title ? '欧阳克' : '黄蓉' }}</view>

# 五、`s-if` 逻辑判断

js示例：

Page({
    data: {
        title: '射雕',
        array: [
            {'id':1,'name':'欧阳克'},
            {'id':2,'name':'黄蓉'},
            {'id':3,'name':'郭靖'}
        ],
        number : 10
    }
})

swan示例：

<view s-if="{{ title }}">标题：{{ title }}</view>
<view s-if="{{ number > 10 }}">人数：{{ number }}</view>

<view s-if="{{ number > 5 }}">1</view>
<view s-elif="{{ number > 2}}">2</view>
<view s-else>3</view>

# 六、`s-for` 循环

使用 s-for-item 可以指定数组当前元素的变量名
使用 s-for-index 可以指定数组当前下标的变量名

js示例：

Page({
    data: {
        title: '射雕',
        array: [
            {'id':1,'name':'欧阳克'},
            {'id':2,'name':'黄蓉'},
            {'id':3,'name':'郭靖'}
        ]
    }
})

swan示例：

<view s-if="{{ title }}">标题：{{ title }}</view>
<view s-for="{{ array }}">ID：{{ item.id }} --- 姓名：{{ item.name }}</view>
<view s-for="{{ array }}" s-for-index="idx" s-for-item="itemName">下标：{{idx}} --- ID：{{ itemName.id }} --- 姓名：{{ itemName.name }}</view>

# 七、`bindtap` 绑定自定义事件

事件是视图层到逻辑层的通讯方式
事件可以将用户的行为反馈到逻辑层进行处理
事件对象可以携带额外信息，自定义传值：data- 进行传值

js示例：

Page({
    zidingyi(){
        console.log('我是自定义方法');
    },
    ouyangke(e){
        console.log(e);
    }
})

swan示例：

<view bindtap="zidingyi">自定义方法</view>
<view bindtap="ouyangke" data-id="1" data-name="欧阳克">自定义方法带传值</view>

# 八、动态设置初始数据

this 代表当前文件
this.setData 设置data里的数据

js示例：

Page({
    data: {
        title: '射雕'
    },
    zidingyi(){
        this.setData({
            title : '欧阳克'
        })
    }
})

swan示例：

<view bindtap="zidingyi">标题：{{ title }}</view>

# 九、`block` 组件

block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

js示例：

Page({
    data: {
        title: '射雕'
    },
    zidingyi(){
        this.setData({
            title : '欧阳克'
        })
    }
})

swan示例：

<block s-if="{{title}}">
    <view bindtap="zidingyi">标题：{{ title }}</view>
</block>

# 十、组件属性 `hidden`

hidden 组件带hidden属性，会被隐藏，但组件存在
s-if 惰性的，如果在初始渲染条件为 false，框架什么也不做，组件不存在

<view s-if="{{title}}">标题：{{ title }}</view>
<view hidden>标题：欧阳克</view>

# 十一、组件绑定自定义事件

小程序的组件有很多默认动作，可以绑定自定义事件

input组件：

属性	类型	描述
bindinput	eventhandle	键盘输入时触发
bindfocus	eventhandle	输入框聚焦时触发
bindblur	eventhandle	输入框失去焦点时触发
bindconfirm	eventhandle	点击完成按钮时触发

js示例：

Page({
    a(){
        console.log('键盘输入时触发');
    },
    b(){
        console.log('输入框聚焦时触发');
    },
    c(){
        console.log('输入框失去焦点时触发');
    },
    d(){
        console.log('点击完成按钮时触发');
    }
})

swan示例：

    <input bindinput="a" bindfocus="b" bindblur="c" bindconfirm="d" />

picker组件：

属性	类型	描述
bindcancel	eventhandle	取消选择时触发
bindchange	eventhandle	value 改变时触发 change 事件

js示例：

Page({
    a(){
        console.log('取消选择时触发');
    },
    b(e){
        console.log('value 改变时触发 change 事件');
        console.log(e);
    }
})

swan示例：

<picker mode="region" bindcancel="a" bindchange="b">
    <view>请选择：</view>
</picker>

checkbox-group组件、radio-group组件：

属性	类型	描述
bindchange	eventhandle	value 改变时触发 change 事件

js示例：

Page({
    a(e){
        console.log('value 改变时触发 change 事件');
        console.log(e);
    }
})

swan示例：

<checkbox-group bindchange="a">
    <checkbox value="1" checked />欧阳克
    <checkbox value="2" color="red" />黄蓉
    <checkbox value="3" disabled />郭靖
</checkbox-group>
<radio-group bindchange="a">
    <radio value="1" checked="true" />欧阳克
    <radio value="2" color="red" />黄蓉
    <radio value="3" />郭靖
    <radio value="4" />杨康
</radio-group>

我是 PHP 程序员

百度小程序-交互

# 交互

# 一、数据交互（初始数据）

# 二、字符串运算

# 三、算数运算

# 四、三元运算

# 五、s-if 逻辑判断

# 六、s-for 循环

# 七、bindtap 绑定自定义事件

# 八、动态设置初始数据

# 九、block 组件

# 十、组件属性 hidden

# 十一、组件 绑定自定义事件

# 五、`s-if` 逻辑判断

# 六、`s-for` 循环

# 七、`bindtap` 绑定自定义事件

# 九、`block` 组件

# 十、组件属性 `hidden`

# 十一、组件绑定自定义事件