微信小程序入门到实战（三）

数据绑定(二）

上一遍文章的结尾介绍了小程序简单的数据绑定方式，但是核心要知道：数据绑定，都是借用

data

这个属性作为一个中转地，服务器上面获取的数据，经过处理，使用

this.setData()

方法绑定到

data属性

中的一个变量，在通过这个变量绑定到页面上面。

接下来说一下数据绑定的其他用途：

标签的显隐

前面说到，小程序里面没有

dom

的概念，就不能通过标签的

display

和

visibility

属性来控制，那怎么控制呢？

在小程序里面，对于一个标签的属性值是

true / false

的时候，在绑定数据的时候，就会对其中的数据进行布尔值的比较，有值就为真，绑定的数据是

false

或者是空的时候就是假；

<swiper  wx:if='{{date}}'  catchtap='onSwiperTab' indicator-dots='{{date}}' vertical='{{false}}' autoplay='{{false}}' interval='5000'>
<swiper-item>
<image src='/images/post/bl.png' data-postid='3'></image>
</swiper-item>
<swiper-item>
<image src='/images/post/xiaolong.jpg' data-postid='2'></image>
</swiper-item>
</swiper>

就拿前面说的轮播组件来说，当我在对应的页面

data

属性里面设置

date

的值的时候，只要不为空或者

false

，那么

swiper

中的两个通过绑定数据的方式设置属性值的属性，其属性值就都会被解析为

true

。那个直接设置

false

的

autoplay

属性就不会自动轮播。

注意那个

wx:if='{{date}} '

，才是控制标签显示和隐藏的关键。如果

date

是真，那么

wx:if='{{date}} '

结果为真，就会显示轮播组件，如果

date

是假，那么

wx:if='{{date}} '

结果为假，就会隐藏轮播组件

图片的切换

通常我们做图片的切换，一般是通过改变图片的路径来实现；在小程序里面可以使用

if  else

动态的控制图片的切换。

类似上面说的控制标签的显示和隐藏，也要使用到数据绑定：

<view class='circle-img'>
<image
b489
catchtap='onCollectionTap' wx:if='{{collected}}' src='/images/icon/collection.png'></image>
<image catchtap='onCollectionTap' wx:else src='/images/icon/collection-anti.png'></image>
<image catchtap='onShareTap' class='share-img' src='/images/icon/share.png'></image>
</view>

上面代码里面，只显示两张图片，通过

collected

这个从服务器传过来的标识，来判断是显示

wx:if='ture'

的图片，还是显示

wx:else

的图片，两者选其一，很方便的控制了图片的切换。

数据的循环

通常编写页面的时候，想把相同的区域呈现多次，又不想编写冗余的代码，小程序里面通过一个属性：

wx:for='{{数据源}}'

<view wx:for='{{datesArry}}' wx:for-item='item' wx:for-index='idx'>
<view catch:tap='onBind'>{{item.date}}</view>
<view catch:tap='onBind'>{{item.title}}</view>
<view catch:tap='onBind'>{{item.content}}</view>
</view>

// Page页面中的数据源
onLoad: function (options) {
var datasArr = [{
date: '2018/2/3',
title: '神盾局特工1',
content: '神盾局特工这个礼拜六停播，说好的不冬歇的呢？'
}, {
date: '2018/2/3',
title: '神盾局特工2',
content: '神盾局特工科学组CP要结婚啦!'
}]
this.setData({ datesArry: datasArr })
// this.setData(datasArr)   setData 方法接收的是一个对象，而不是数组
}

我们把要呈现多次的区块，用一个标签包裹

view  /  block

，然后在其上面作用于

wx:for

属性，接收一个数组或者集合的数据，

datesArry

就是要循环的数据数组，

wx:for-item='item' wx:for-index='idx'

中的

item

是被循环的子对象，

idx

是对应子对象在数据数组里面的索引位置；这两个值都默认是有的，即使不写。

前面也说道过，

this.setData()

方法是把里面接收到的数据，绑定到

Page

下面的

data属性

里面，然后在展示在页面中，小程序的数据绑定，都是从

Page

中的

data属性

中读取数据去完成数据绑定。这个读取

data

属性中的数据去绑定到页面的动作是发生在

onLoad

事件之后的。

既然这么说的话，那么可不可以直接给

data

对象身上直接添加属性，并且直接赋值：

this.data.datesArry=datasArr

，这样是绑定不了数据到页面上，虽然不会报错，小程序的前期版本里面是可以这样绑定数据的。所以都建议使用

this.setData()

方法去主动更新数据。

要是数据是存放在其他的文件夹下面，应该怎么样读取呢？在数据文件中，通过抛出一个数据出口，来通过其他文件进行访问：

module.exports = {
postList: dataBase  // 数据数组的名字
}

在要使用数据的

js

文件下，引入要使用数据的路径，应该在

page

外面引入：

var postsData = require('数据文件所在的路径');

注意这个

require

中的路径名是相对路径，不能是绝对路径。