小程序开发总结3：swiper滑块视图

1：知识点讲解

为达到”快速，极简”开发理念，微信官方以swiper组件的方式提供滑动视图容器，开发中只需通过简单的配置参数，就能完成滑动的需求，其中基本的属性定义如下

2：开发实战

开发过程只需用到swiper组件，并根据官方定义：“”其中只可放置组件，其他节点会被自动删除。“”

和block组件结合使用，依据定义的for循环，动态生成对应数量的滚动图

js资源数据定义

//获取应用实例
var app = getApp()
Page({
    data: {
        indicatorDots: true,
        vertical: false,
        autoplay: true,
        interval: 3000,
        duration: 1000,
        loadingHidden: false, // loading
        schoolURL :'http://www.aninext.com'
    },
     imageError: function(e) {
        console.log('image3发生error事件，携带值为', e.detail.errMsg)
    },

     onLoad: function() {
        console.log('onLoad')
        var that = this
            //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo) {
            //更新数据
            that.setData({
                userInfo: userInfo
            })
        })

        //sliderList
        wx.request({
            url: 'http://www.aninext.com/searchKeyWord?keyWord=¤tPage=2&pageSize=8',
            method: 'GET',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
                that.setData({
                    images : res.data.resultParm.college,
                })
            }
        })
    }

})

其中图片数据通过微信提供的（wx.request）API获取到，并动态绑定到对应的视图

3：注意点

笔者在填写url的时候，想当然的填写了一个本地的图片地址，在调试过程才发现，不能正常被显示出来

所以如果开发过程发现自己的图片无法正常被显示，可以检查检查自己填写的url