小程序开发日记三 (轮播图及数据绑定

两个内容。一个是小程序中使用轮播图。二是进行数据绑定。

一、小程序轮播图 组件使用

小程序官方提供一个滑动视图容器—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 中。从而我们可以实现展示后台的数据。