码迷,mamicode.com
首页 > 其他好文 > 详细

小程序-广告轮播/控制属性

时间:2018-01-06 14:31:45      阅读:370      评论:0      收藏:0      [点我收藏+]

标签:自动播放   change   cti   间隔   auto   this   事件   显示图片   bin   

【转】小程序-广告轮播/控制属性

 

微信小程序广告轮播元素<swiper></swiper>  图片所在元素<swiper-item>/swiper-item>

其中属性有:

 autoplay:true,//是否自动播放
    autoplaytxt:"停止自动播放",
    indicatorDots: true,//指示点
    // indicator-color:"white",//指示点颜色 暂未启动
    // indicator-active-color:"red",//当前选中的指示点颜色暂未启动
    indicatorDotstxt:"隐藏指示灯",
    interval: 1000,//图片切换间隔时间
    duration: 500,//每个图片滑动速度,
    circular:true,//是否采用衔接滑动
    current:3,//初始化时第一个显示的图片 下标值(从0)index

  图片更改事件:bindchange=‘imgchange‘ imagechange()的e.detail.current为当前显示页面的下标值

例子如下:

wxml:

广告轮播/手动滑动 swiper
<swiper bindchange="imgchange" indicatorDots=‘{{indicatorDots}}‘ current=‘{{current}}‘ autoplay=‘{{autoplay}}‘ interval=‘{{interval}}‘duration=‘{{duration}}‘ circular=‘{{circular}}‘>
	<block wx:for=‘{{imgUrls}}‘>
	<swiper-item>
		<image style="" mode="" src="{{item}}" binderror="" bindload="" class=‘swiper-img‘></image>
	</swiper-item>
	</block>
</swiper>
<button  bindtap="autoplaychange" >{{autoplaytxt}}</button>

  wxjs:

Page({
  data: {
    imgUrls: [
      ‘../../img/3.jpg‘,//图片src
      ‘../../img/6.jpg‘,
      ‘../../img/5.jpg‘,
      ‘../../img/4.jpg‘
    ],
    autoplay:true,//是否自动播放
    autoplaytxt:"停止自动播放",
    indicatorDots: true,//指示点
    // indicator-color:"white",//指示点颜色 暂未启动
    // indicator-active-color:"red",//当前选中的指示点颜色暂未启动
    indicatorDotstxt:"隐藏指示灯",
    interval: 1000,//图片切换间隔时间
    duration: 500,//每个图片滑动速度,
    circular:true,//是否采用衔接滑动
    current:3,//初始化时第一个显示的图片 下标值(从0)index

  },
  autoplaychange:function(event){//停止、播放按钮

    if (this.data.autoplaytxt=="停止自动播放") {
      this.setData({
        autoplaytxt:"开始自动播放",
        autoplay:!this.data.autoplay
      })
    }else{
       this.setData({
        autoplaytxt:"停止自动播放",
        autoplay:!this.data.autoplay
      })
    };
   
  },
  imgchange:function(e){//监听图片改变函数
console.log(e.detail.current)//获取当前显示图片的下标值
  }
})

wxss:  

.swiper-img{
	width: 100%;
	height: 500rpx;
}

  

页面效果:

技术分享图片

 

小程序-广告轮播/控制属性

标签:自动播放   change   cti   间隔   auto   this   事件   显示图片   bin   

原文地址:https://www.cnblogs.com/liyuspace/p/8213585.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!