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

1：知识点讲解

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



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>

和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