微信小程序开发技术教程之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开发的区别

    微信小程序被说看成是一个原生App似的产品,这并不是空穴来风,而是小程序在开发上的定位与功能

pc蛋蛋 湖北快3 河北快3 河北快3 河北快3 河北快三 pc蛋蛋 pc蛋蛋网站 河北快3 pc蛋蛋首页