摘要:本文将带你了解微信小程序开发之触摸内容滑动解决方案we-swiper,希望本文对大家学微信有所帮助。
本文将带你了解微信小程序开发之触摸内容滑动解决方案we-swiper,希望本文对大家学微信有所帮助。
微信小程序触摸内容滑动解决方案,API设计细节及命名参考于swiper.js.为什么要开发这款插件官方swiper组件:支持的事件回调很单一从文档上看只是能支持横向滑动拓展性不强we-swiper插件:丰富的事件回调丰富的属性支持横、纵向滑动强拓展(可在原插件基础上二次开发)ScreenShots横向滚动纵向滚动使用方式克隆项目至你的目录cd my-project
git clone https://github.com/dlhandsome/we-swiper.git在项目文件引入dist/weSwiper.js进行开发es6 moduleimport weSwiper from 'dist/weSwiper'commonjsvar weSwiper = require('dist/weSwiper')示例example.wxml <view class="we-container {{directionClass}}">
<view
bindtouchstart="touchstart"
bindtouchmove="touchmove"
bindtouchend="touchend"
animation="{{animationData}}">
<view>slide 1</view>
<view>slide 2</view>
<view>slide 3</view>
</view>
</view>example.jsimport weSwiper from '../dist/weSwiper'
const option = {
touchstart (e) {
this.weswiper.touchstart(e)
},
touchmove (e) {
this.weswiper.touchmove(e)
},
touchend (e) {
this.weswiper.touchend(e)
},
onLoad () {
new weSwiper({
animationViewName: 'animationData',
slideLength: 3,
initialSlide: 0,
/**
* swiper初始化后执行
* @param swiper
*/
onInit (weswiper) {
},
/**
* 手指碰触slide时执行
* @param swiper
* @param event
*/
onTouchStart (weswiper, event) {
},
/**
* 手指碰触slide并且滑动时执行
* @param swiper
* @param event
*/
onTouchMove (weswiper, event) {
},
/**
* 手指离开slide时执行
* @param swiper
* @param event
*/
onTouchEnd (weswiper, event) {
},
/**
* slide达到过渡条件时执行
*/
onSlideChangeStart (weswiper) {
},
/**
* weswiper从一个slide过渡到另一个slide结束时执行
*/
onSlideChangeEnd (weswiper) {
},
/**
* 过渡时触发
*/
onTransitionStart (weswiper) {
},
/**
* 过渡结束时执行
*/
onTransitionEnd (weswiper) {
},
/**
* 手指触碰weswiper并且拖动slide时执行
*/
onSlideMove (weswiper) {
},
/**
* slide达到过渡条件 且规定了方向 向前(右、下)切换时执行
*/
onSlideNextStart (weswiper) {
},
/**
* slide达到过渡条件 且规定了方向 向前(右、下)切换结束时执行
*/
onSlideNextEnd (weswiper) {
},
/**
* slide达到过渡条件 且规定了方向 向前(左、上)切换时执行
*/
onSlidePrevStart (swiper) {
},
/**
* slide达到过渡条件 且规定了方向 向前(左、上)切换结束时执行
*/
onSlidePrevEnd (weswiper) {
}
})
}
}
Page(option)
we-swiper初始化weSwiper在onLoad方法中实例化onLoad () {
new weSwiper({
slideLength: 3 // 必填,由于目前无法直接获取slide页数,目前只能通过参数写入
})
}可通过this.weswiper在Page的钩子函数中访问实例touchstart (e) {
this.swiper.touchstart(e)
}WXML结构配置<
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号