微信小程序开发技术教程之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开发要简单得多,但是该注意的东西还是得注意,一些最基本的方面更是要注重,避免一些最基本但具有毁灭性的情况出现。那么,这些所谓的基本注意点有哪些?现在小编可以来分点述说一下。

河北快3 河北快3 河北快3 冠军彩票充值 189彩票充值中心 159彩票 河北快3走势图 江苏快3官网 1博彩票官网 河北快3走势图