h5轮播图代码_小程序开发日记三 （轮播图及数据绑定）

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

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

        小程序官方提供一个滑动视图容器—swiper组件。该组件可以帮助我们实现一个轮播图。所谓轮播图就是在页面中不断变换图片的模块。很多网站我们一进去首页都可以看到在变换的图片，这个便是轮播图，让有限的页面帮助我们展示更多的东西。这个功能很常见，实现原理就是通过js控制多张图片的移动(实现原理可网上搜索)。小程序swiper组件可以帮助我们快速实现这个功能。代码样例如下图：

<view> : 相当于HTML中的 <div>. 看做为一个块。作为整个页面的一个容器<swiper>: swiper 组件标签。使用 <swiper> 和swiper> 即表示我们使用了swiper组件下面3个是swiper 组件中的常用参数  indicator-dots：boolean 类型 轮播图中间的小点。默认值为false  autoplay 是否自动播放。 默认值为false  interval 轮播间隔时间，单位毫秒。 默认值为 5000毫秒

        在这个容器中放置图片载体的地方是 . 我们可以定义多个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 中。从而我们可以实现展示后台的数据。