小程序学习之一-------轮播图模块

###小程序学习之一-------轮播图模块

1—页面(.wxml)

######wxml页面代码:

	<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="500">
			<block wx:for="{{banners}}" wx:key="id">
				<swiper-item>
					<image bindtap="tapBanner" data-id="{{index}}" src="{{item.img}}"/>
				</swiper-item>
			</block>
		</swiper>

其中 :<scroll-view scroll-y="true" scroll-into-view="{{scrollIntoView}}" bindscroll="onScroll">:这个是一开始就定义页面模式

scroll-view:可滚动视图区域

scroll-y:允许纵向滚动----默认值为:false

scroll-into-view:值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

bindscroll:滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

swiper:滑块视图容器

indicator-dots:是否显示面板指示点

vertical:垂直

autoplay:是否自动切换

interval:自动切换时间间隔(3000-3秒)

duration:滑动动画时长(500–0.5秒)

然后: block标签跟navigator标签一样,不占行

wx:for---- 是用来遍历循环生成轮播图片多少张数

image标签占行,所以在外面用个swiper-item标签将其包裹起来,以至于不影响布局效果

bindtap:在组件中绑定一个事件处理函数

data-id:绑定每张图片对应的id

src:图片路径

2—wxss样式部分

.swiper{
    width:100%;
    margin:0rpx;
}
.swiper image{
    display: inline;
}

3----.js部分

//index.js
//获取应用实例
var app = getApp()
var fileData = require('../../utils/data.js')

Page({
  // 页面初始数据
  data: {
      // banner 初始化
      banner_url: fileData.getBannerData(),//本地拿取数据---图片地址
      indicatorDots: true,//否显示面板指示点
      vertical: false,//垂直
      autoplay: true,//:是否自动切换
      interval: 3000,//自动切换时间间隔(3000-3秒)
      duration: 1000,//滑动动画时长(1000--1秒)
  }