微信小程序开发技术教程之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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 为什么微信小程序会成为新一轮的商业机遇

    从微信小程序未出现之前,它的消息已经放出就已经引起业内的极大关注,很多人认为它将掀起一轮新的商业发展风暴。而在小程序沉淀后的爆发中

  • 微信小程序市场的商业价值体现在哪?

    张小龙在微信小程序上线的时候就说过,未来两年内,小程序将会取代APP应用80%的市场。而事实是否如此,目前我们还是无法去下结论的。但是其带来

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

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

  • 微信小程序放出新功能,传送门开启更便捷

    为了让微信小程序在使用上能够更加便捷,微信官方又开放了两个新功能,作为便捷的“传送门”来让小程序本身引流、为公众号引流的效果更进一步

  • 政府单位开发微信小程序有什么好处

    小编通过软文谈论过很多行业开发微信小程序的好处,今天这篇推文同样也要来讨论开发的好处,不过今天的主题是关乎政府单位的话题,与商业行业还是有些不同,所以小程序带给它的作用与好处相对会更偏向公益化,而非利益化。

  • 旅行社要不要开发微信小程序?可以怎么用?

    这是一份假装真心实意的问答调查情景式推文,总结一下旅行社与小程序之间剪不断理也不乱的关系,仔细看看还有点小用处。