456棋牌游戏中心

微信小程序开发技术教程之swiper组件

2018/8/6 19:30:33
摘要: 微信小程序滑块视图容器swiper类似于安卓的ViewPager,但是微信小程序的swiper相比于安卓的ViewPager要容易实现一点,下面将为大家介绍

微信小程序滑块视图容器swiper类似于安卓的ViewPager,但是微信小程序的swiper相比于安卓的ViewPager要容易实现一点,下面将为大家介绍swiper的一些使用方法。

 

主要属性:

属性名

类型

默认值

说明

Indicator-dots

Boolean

False

是否显示面板指示点

Autoplay

Boolean

False

是否主动切换

Current

Number

0

当前所在页码的index

Interval

Number

5000

自动切换时间间隔

Duration

Number

1000

滑动动画时长

Bindchange

eventHandle


Current改变是会触发change事件,event.detail={current:current}

 

数据可以通过抽到js文件中的data进行数据绑定,对bindchange进行监听,在js中进行业务处理。

 

以下是效果图:

image.png

 image.png

 

以下是wxml代码:

 

<!--是否显示圆点,自动播放, 间隔时间, 监听滚动和点击事件-->

<swiper indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" >

<!--swiper-item只能包含一个节点再多会自动删除-->

    <swiper-item>

        <view style="background: red; height: 150px"></view>

    </swiper-item>

    <swiper-item>

         <view style="background: green; height: 150px"></view>

    </swiper-item>

        <swiper-item>

          <view style="background: blue; height: 150px"></view>

    </swiper-item>    

</swiper>

 

以下是js代码:

 

Page({ data:{ // text:"这是一个页面" },

 /**

* 这里处理滚动事件处理

*/ listenSwiper:function(e) { 

//打印信息 

console.log(e)

 },

onLoad:function(options){ 

// 页面初始化 options为页面跳转所带来的参数

 },

 onReady:function(){ 

// 页面渲染完成 

},

onShow:function(){

 // 页面显示 

},

onHide:function(){ 

// 页面隐藏 

},

onUnload:function(){

 // 页面关闭 

} })



声明:文章"微信小程序开发技术教程之swiper组件"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
456棋牌游戏中心相关的文章
  • 456棋牌游戏中心微信小程序开发基础知识说明

    微信小程序开发之前,需要申请注册一个小程序账号,并下载开发工具;而在开发完成之后,则需要对开发效果进行测试

  • 微信小程序开发技术教程之Mustache语法要点总结

    开发人员在做小程序开发的时候,会在wxml里,用到Mustache语法。而Mustache其实就是一个logic-less(轻逻辑)模板解析引擎

  • 如何避开小程序被封号的危险?

    前阵子风风火火的微信账号封号风波,给被封号微信自媒体的媒体人蒙头一棒,但也同时给同行业的人提了醒,让大家重新重视起微信的禁忌,以免被封号。而且,不仅微信公众号会有封号的危险,小程序账号也会

  • 微信小程序开发教程之自定义toast实例

    自从小程序发布以后,越来越多的开发者投入到小程序的开发当中去,而且微信有着相当完善的API和组件,使用起来简单

  • 微信小程序与公众号的区别是什么?

    微信事业群在微信开发的过程中,孵化出微信小程序与微信公众号这两个方向,然后目前微信小程序开发

  • 微信小程序开发三大需要明确的合作陷阱

    456棋牌游戏中心在寻求与微信小程序第三方开发公司合作的时候,企业商家可能会有遇到非正规开发公司的可能,这些公司开出的合作

翡翠棋牌平台 金陵棋牌游戏 456棋牌 翡翠棋牌APP官网下载 456棋牌 京都棋牌官网 天天乐棋牌 光明棋牌下载 京都棋牌 爱尚彩票平台