微信小程序（十）swiper组件详细介绍
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
Android写过轮播图的痛楚只有写过的知道，相对还是比较麻烦的，并没有一个轮播图组件，有个ViewPage也需要自己定制，IOS则多用UIScrollerView去实现，这个swiper封装的相对还是方便的，使用方式也相对那俩容易些。
主要属性：
属性只需要设置就行了 也可以抽到js文件的data中进行数据绑定，监听使用bindchange，在js中做业务处理。
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(){
// 页面关闭
}
})
相关文章：
hello WeApp icon组件
Window text组件 switch组件
tabBar底部导航 progress组件 action-sheet
应用生命周期 button组件 modal组件
页面生命周期 checkbox组件 toast组件
模块化详 form组件详 loading 组件
数据绑定 input 组件 navigator 组件
View组件 picker组件 audio 组件
scroll-view组件 radio组件 video组件
swiper组件 slider组件 Image组件
相关文章
这篇文章主要为大家介绍了JavaScript集成公式编辑器示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了Javascript设计模式之原型模式，原型模式用于在创建对象时，通过共享某个对象原型的属性和方法，从而达到提高性能、降低内存占用、代码复用的效果。下面小编将详细介绍 ,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了微信小程序 tabs选项卡效果的实现的相关资料,微信小程序内部组件没有Tabs 选项卡的功能，自己实现个类似的，需要的朋友可以参考下2017-01-01
这篇文章主要介绍了JavaScript?ES新特性块级作用域，所谓的块级作用域，就是该变量只能在声明时的代码块或者子代码块中使用，使JavaScript出现了块级作用域，具体详细内容请参考下面文章内容2021-12-12
这篇文章主要介绍了微信小程序 location API接口相关资料,这里详细介绍了location API接口并附简单实例代码，需要的朋友可以参考下2016-10-10
这篇文章主要介绍了微信小程序之前台循环数据绑定的相关资料,这里提供实例帮助大家学习理解这部分内容，需要的朋友可以参考下2017-08-08
ant-design的upload组件中实现粘贴上传实例详解
这篇文章主要为大家介绍了ant-design的upload组件中实现粘贴上传实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家介绍了JS前端接口请求参数混淆方案分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
Sea.js的目的是追求简单的代码书写和组织方式,Sea.js并没有过多功能而是主要对前端程序的部署结构作出约束,下面我们就来看一下JavaScript的模块化开发框架Sea.js上手指南:2016-05-05
这篇文章主要介绍了微信小程序联网请求的轮播图的相关资料,需要的朋友可以参考下2017-07-07
最新评论