美文网首页小程序杂章
微信小程序-swiper组件

微信小程序-swiper组件

作者: 小码哥教育520it | 来源:发表于2016-10-21 09:18 被阅读5615次

    滑块视图容器
    常用属性:


    注意:swiper中只可放置<swiper-item/>组件,其他节点会被自动删除。
    效果图:

    swiper.wxml添加代码:
    <swiper indicator-dots="{{indicatorDots}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image"/>
        </swiper-item>
      </block>
    </swiper>
    <button bindtap="changeIndicatorDots"> 是否显示面板指示点 </button>
    <button bindtap="changeAutoplay"> 是否自动切换 </button>
    <slider bindchange="intervalChange" show-value min="1000" max="2000"/> 自动切换时间间隔
    <slider bindchange="durationChange" show-value min="1800" max="10000"/> 滑动动画时长
    

    swiper.js添加代码:

    Page({
      data: {
        imgUrls: [
          'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
          'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        ],
        indicatorDots: false,
        autoplay: false,
        interval: 1000,
        duration: 1800
      },
      //是否显示面板指示点
      changeIndicatorDots: function(e) {
        this.setData({
          indicatorDots: !this.data.indicatorDots
        })
      },
      //是否自动切换
      changeAutoplay: function(e) {
        this.setData({
          autoplay: !this.data.autoplay
        })
      },
      //自动切换时间间隔
      intervalChange: function(e) {
        this.setData({
          // e.detail.value获取slider的值
          interval: e.detail.value
        })
      },
      //滑动动画时长
      durationChange: function(e) {
        this.setData({
          duration: e.detail.value
        })
      },
      //当页面改变是会触发
      bindchangeTag:function(e){
        console.log("bindchangeTag...")
      }, 
      onLoad:function(options){
        // 页面初始化 options为页面跳转所带来的参数
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      onHide:function(){
        // 页面隐藏
      },
      onUnload:function(){
        // 页面关闭
      }
    })
    

    swiper.wxss添加代码:

    .slide-image{
        width: 100%;
        height: 160px;
    }
    

    来源:
    http://bbs.520it.com/forum.php?mod=viewthread&tid=2566&extra=page%3D1

    相关文章

      网友评论

        本文标题:微信小程序-swiper组件

        本文链接:https://www.haomeiwen.com/subject/fgiquttx.html