联系我们 - 广告服务
您的当前位置:主页 > 布局 > 开发 >

滑块视图组件

来源:未知 编辑:admin 时间:2018-01-17
导读: 滑块视图容器在前端开发中是一个常见组件,利用它我们可以实现轮播图、滑动页面、图片预览等效果。一个完整的滑块视图组件由swiper/和swiper-item/两个标签组成,它们不能单独使用,一个swiper/中只能放置一个或多个swiper-item/,放置其他节点会被删除,swi
   滑块视图容器在前端开发中是一个常见组件,利用它我们可以实现轮播图、滑动页面、图片预览等效果。一个完整的滑块视图组件由<swiper/>和<swiper-item/>两个标签组成,它们不能单独使用,一个<swiper/>中只能放置一个或多个<swiper-item/>,放置其他节点会被删除,<swiper-item/>内部能放置任何组件,默认宽高自动设置为100%。<swiper-item/>组件作为容器没有任何特殊属性,<swiper/>组件属性如下:
·indicator-dots:是否显示面板指示点,默认为false。
·autoplay:是否自动切换,默认为false。
·current:当前所在页面的index,默认为0。
·interval:自动切换时间间隔,默认为5000。·duration:滑动动画时长,默认为1000。
·circular:是否采用衔接滑动,默认值为false。
·bindchange:current改变时会触发change事件,event.detail={current:current}。
1.基本轮播图
本案例主要讲解滑块视图最基本用法,开始图如图所示。
                                                                   
示例代码如下
: <1-开启默认面板指示点,
并设置为自动播放-->
<swiper class="banner" indicator-dots="true" autoplay="{{autoplay}}" 
current="0" interval="2000"
duration="300" bindchange="change">  
<block wx:for="{{sliderList}}">  
  <swiper-item class="{{item.className}}">{{item.name}}</swiper-item>
  </block>
</swiper>
<view>
  <button bindtap="play">暂停|播放</button>
</view>
.banner { height : 400px; background-color: #ddd; }
.bg-blue { background-color: #87CEFA; }
.bg-red { background-color: #FF6347; }
.bg-green { background-color: #43CD80; }
Page( {  
data : {
autoplay : true,  
  sliderList : [    
  { className : 'bg-red', name : 'slider1' },    
  { className : 'bg-blue', name : 'slider2' },  
    { className : 'bg-green', name : 'slider3' }  
  ]  
},  
play : function() {  
  this.setData( {  
    autoplay : !this.data.autoplay  
  } );
  },   change : function() {  
  console.log( '执行了滚动' );
  }
} );
 2.自定义轮播图
<swiper/>默认组件中不提供面板指示点的样式设置,而在轮播组件中,我们常常需要设置自定义面板指示点,这时可以通过bindchange事件实现图a一样的定义面板。

代码如下:
<view class="customSwiper">  
<!--不开启默认面板-->  
<swiper class="banner" autoplay="true" interval="2000" duration="300"
      bindchange="switchTab">  
  <block wx:for="{{sliderList}}">
<swiper-item>
       <image style="width:100%;height:100%;" src="{{item.imageSource}}"/>  
    </swiper-item>    
</block>
  </swiper>  
<!--自定义面板构建-->
  <view class="tab">    
<block wx:for="{{sliderList}}">    
  <view wx:if="{{item.selected}}" class="tab-item  
           selected">{{index+1}}</view>       <view wx:else class="tab-item">{{index+1}}</view>
    </block>  
</view>
</view>
.customSwiper { height : 379.5rpx; position: relative; }
.customSwiper swiper{ height : 100%; }
/*自定义面板样式*/
.tab { height : 70rpx; position: absolute; bottom : 0; display: flex;  
       width : 100%; text-align: center; justify-content : center;    
     align-items: center; }
.tab .tab-item{ background-color: #ccc; height : 50rpx; width : 50rpx;      
   line-height: 50rpx; font-size :
12rpx; color : #fff; border-radius: 4px;      
   margin-right : 10px; }
.tab .tab-item.selected { background-color: red; }
Page( {  
data : {  
  sliderList : [    
  { selected : true, imageSource : './image/banner1.jpg' },    
  { selected : false, imageSource : './image/banner2.jpg' },    
  { selected : false, imageSource : './image/banner3.jpg' }
]
  },
  //监听swiper滚动事件,并切换面板   switchTab : function( e ) {  
  var sliederList = this.data.sliderList,          i, l;      
  //修改指示点选中态  
  for ( i = 0; item = sliederList[i]; ++i ) {
      item.selected = e.detail.current == i;
    }  
  this.setData( {  
    sliderList : sliederList  
  } );  
 }
} );
责任编辑:admin

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

上一篇:scroll-view组件
下一篇:基础组件 icon

网友评论:

在“\templets\demo\comments.htm”原来的内容全部删除,插入第三方评论代码,如果不需要评论功能,删除comments.html里面的内容即可
推荐使用友言、多说、畅言(需备案后使用)等社会化评论插件

Copyright © Tricks资讯网 版权所有
本站所有资讯来源于网络 如有侵权请联系QQ:940910888 技术支持鹏博科技
Top