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

1：知识点讲解

2：开发实战

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

<view>
        <swiper class="swiper_box" indicator-dots="{
         
  {indicatorDots}}" vertical="{
         
  {vertical}}"
                autoplay="{
         
  {autoplay}}" interval="{
         
  {interval}}" duration="{
         
  {duration}}" >
            <block wx:for="{
         
  {images}}">
                <swiper-item>
                    <image src="{
         
  {schoolURL}}{
         
  {item.images}}" class="slide-image"/>
                </swiper-item>
            </block>
        </swiper>
    </view>

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,
                })
            }
        })
    }

})

3：注意点

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

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