小程序开发日记三 (轮播图及数据绑定
两个内容。一个是小程序中使用轮播图。二是进行数据绑定。
一、小程序轮播图 组件使用
小程序官方提供一个滑动视图容器—swiper组件。该组件可以帮助我们实现一个轮播图。所谓轮播图就是在页面中不断变换图片的模块。很多网站我们一进去首页都可以看到在变换的图片，这个便是轮播图，让有限的页面帮助我们展示更多的东西。这个功能很常见，实现原理就是通过js控制多张图片的移动（实现原理可网上搜索）。小程序swiper组件可以帮助我们快速实现这个功能。代码样例如下图：
<view> : 相当于HTML中的 <div>. 看做为一个块。作为整个页面的一个容器
<swiper>: swiper 组件标签。使用 <swiper> 和</swiper> 即表示我们使用了swiper组件
下面3个是swiper 组件中的常用参数
indicator-dots：boolean 类型 轮播图中间的小点。默认值为false
autoplay 是否自动播放。 默认值为false
interval 轮播间隔时间，单位毫秒。 默认值为 5000毫秒
在这个容器中放置图片载体的地方是 <swiper-item>. 我们可以定义多个swiper-item. 来放置多张图片。
我们需要注意的一点是swiper组件的直接子元素只能是 swiper-item. 如果放置了其他的标签、组件 将会被自动删除。如果需要引入其他的标签、组件，需要写在swiper-item中。
二、数据绑定
在网页中，要显示的东西往往是需要经常更新的。虽然我们可以采用硬编码的方式（硬编码：将数据直接写入代码）制作静态页面。但这个往往满足不了实际业务场景，我们是要从后台将数据传递到前端，然后在前端展示。
在小程序中我们同样面临这个问题，有些数据我们可以通过硬编码写入页面，但大部分我们是需要后台将数据传入页面，不然我们的页面依旧是单调且无法满足大部分业务场景。
小程序中有两种数据绑定方式：
1. 初始化数据的数据绑定。如果在项目中有大量重复的数据，我们可以抽离出来。将这些数据直接写在.js文件的Page方法参数的data对象下面。如图：
使用时使用"{{ }}"将data 中的key 包裹即可。当代码运行时，将会自动将这些数据导入。
<view class="post-author-date">
<image src="{{avatar}}"></image>
<text>{{object.date}}</text>
</view>2. 使用用setData方法来做数据绑定。将数据实时更新到方法1中的data中。如果有相同的key，将会被覆盖。
Page({
// 1 创建元数据
/**
* 页面的初始数据
*/
data: {
date:"2020/05/30",
title:"这是一个绑定的数据",
avatar:"/images/touxiang_nan1.png",
object:{
date:"2020-05-30"
},
collectionNum:{
array:[108,999]
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 动态修改上面data 的数据
this.setData({
title:"这里动态的修改了标题",
})
},
})
上面的代码中，使用了setData方法，在页面打开的时候（生命周期函数 onLoad: function (options) {do some thing}），修改了title 这个key的值。当然这个key 的值在这里也是硬编码写死了。不过通过这里我们可以知道，我们可以通过向后台请求数据，将返回的数据通过这种方式，更新到data 中。从而我们可以实现展示后台的数据。