微信小程序轮播图组件swiper

Love The Way You Lie 2021-07-24 23:14 601阅读 0赞

在官网文档->组件->视图容器查找具体内容
     
    <swiper
    	滑块视图容器,其中只可放置swiper-item组件,否则会导致未定义的行为。
    	indicator-dots		是否显示面板指示点
    	indicator-color		指示点颜色
    	indicator-active-color	当前选中的指示点颜色 	
    	autoplay				是否自动切换 
    	current					当前所在滑块的index
    	interval				自动切换时间间隔,默认5000
    	duration				滑动动画时长,默认500
    	circular				是否采用衔接滑动 
    	vertical 				滑动方向是否为纵向
    	previous-margin 		前边距,可用于露出前一项的一小部分,接受px和rpx值
    	next-margin				后边距可用于露出后一项的一小部分,接受px和rpx值
    	snap-to-edge 			boolean,当swiper-item的个数大于等于2,关闭circular并且开启previous-margin或next-margin的时候,可以指定这个边距是否应用到第一个、最后一个元素
    	display-multiple-items 	number,同时显示的滑块数量,默认为1
    	easing-function 		指定swiper切换缓动动画类型,默认为default
    		default 		默认缓动函数 	
    		linear 			线性动画 	
    		easeInCubic 	缓入动画 	
    		easeOutCubic 	缓出动画 	
    		easeInOutCubic 	缓入缓出动画
    	bindchange 				当current改变时会触发change事件,额外添加event.detail = {current, source}
    		source:表示导致变更的原因
    		    1.autoplay 自动播放导致swiper变化；
    		    2.touch 用户划动引起swiper变化；
    		    3.其它原因将用空字符串表示
    		如果在bindchange的事件回调函数中使用setData改变current值,则有可能导致setData被不停地调用
    		因而通常情况下请在改变current值前检测source字段来判断是否是由于用户触摸引起。
    
    	bindtransition 			当swiper-item的位置发生改变时会触发transition事件,event.detail = {dx: dx, dy: dy}
    	bindanimationfinish 	动画结束时会触发animationfinish事件,event.detail同上
    >
      <swiper-item
      	item-id						该swiper-item的标识符
    	skip-hidden-item-layout 	是否跳过未显示的滑块布局,设为true可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息
      >xxx</swiper-item>
      <swiper-item>xxx</swiper-item>
      <swiper-item>xxx</swiper-item>
    </swiper>

代码示例:  
wxml文件:

<view class='v-container'>
    
      <swiper class='swipe' indicator-dots='{ {flag}}' autoplay interval='3000' circular='true' >
        <swiper-item>
          <image src='../images/banner1.jpg'></image>
        </swiper-item>
        <swiper-item>
          <image src='../images/banner2.jpg'></image>
        </swiper-item>
        <swiper-item>
          <image src='../images/banner3.jpg'></image>
        </swiper-item>
      </swiper>
    
    </view>

js文件:

// pages/news/news.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
          flag:true
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
    
      }
    
    })