{"id":13788984,"url":"https://github.com/we-plugin/wepy-com-swiper","last_synced_at":"2025-05-06T12:30:56.567Z","repository":{"id":65379399,"uuid":"87099735","full_name":"we-plugin/wepy-com-swiper","owner":"we-plugin","description":":sparkles: 微信小程序触摸内容滑动解决方案，适用于wepy框架","archived":false,"fork":false,"pushed_at":"2018-10-10T06:19:54.000Z","size":207,"stargazers_count":77,"open_issues_count":8,"forks_count":16,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-25T08:02:15.893Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/we-plugin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-03T17:08:49.000Z","updated_at":"2024-03-20T09:29:06.000Z","dependencies_parsed_at":"2023-01-20T08:55:15.184Z","dependency_job_id":null,"html_url":"https://github.com/we-plugin/wepy-com-swiper","commit_stats":null,"previous_names":["dlhandsome/wepy-com-swiper"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/we-plugin%2Fwepy-com-swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/we-plugin%2Fwepy-com-swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/we-plugin%2Fwepy-com-swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/we-plugin%2Fwepy-com-swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/we-plugin","download_url":"https://codeload.github.com/we-plugin/wepy-com-swiper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252683426,"owners_count":21788037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T21:00:57.091Z","updated_at":"2025-05-06T12:30:56.306Z","avatar_url":"https://github.com/we-plugin.png","language":"JavaScript","funding_links":[],"categories":["微信小程序WePY框架开发资源汇总 ![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)","JavaScript"],"sub_categories":["WePY开源组件"],"readme":"# wepy-com-swiper\n微信小程序触摸内容滑动解决方案，适用于wepy框架\n\n### 为什么要开发这款插件\n#### 官方swiper组件：\n* 支持的事件回调很单一\n* 从文档上看只是能支持横向滑动\n* 拓展性不强\n\n#### wepy-com-swiper插件:\n* 丰富的事件回调\n* 丰富的属性\n* 支持横、纵向滑动\n* 强拓展（可在原插件基础上二次开发）\n\n## ScreenShots\n#### 横向滚动\n![Alt text](https://github.com/we-plugin/we-swiper/blob/master/screenshots/Gif_20170401_013729.gif?raw=true)\n#### 纵向滚动\n![Alt text](https://github.com/we-plugin/we-swiper/blob/master/screenshots/Gif_20170401_013701.gif?raw=true)\n\n## 安装组件\n```bash\nnpm install wepy-com-swiper --save\n```\n\n## 示例\n#### index.wpy\n```\n \u003cstyle lang=\"less\"\u003e\n  .we-slide{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #fff;\n    font-size: 2rem;\n  }\n\n  .we-slide:nth-child(1){\n    background-color: #4390EE\n  }\n  .we-slide:nth-child(2){\n    background-color: #CA4040\n  }\n  .we-slide:nth-child(3){\n    background-color: #FF8604\n  }\n\u003c/style\u003e\n\u003ctemplate\u003e\n  \u003cview class=\"container\"\u003e\n    \u003cweSwiper :option=\"swiper\"\u003e\n      \u003cview class=\"we-slide\"\u003eslide 1\u003c/view\u003e\n      \u003cview class=\"we-slide\"\u003eslide 2\u003c/view\u003e\n      \u003cview class=\"we-slide\"\u003eslide 3\u003c/view\u003e\n    \u003c/weSwiper\u003e\n  \u003c/view\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import wepy from 'wepy'\n  import weSwiper from 'wepy-com-swiper'\n\n  export default class Index extends wepy.page {\n    config = {\n      navigationBarTitleText: 'test'\n    }\n    components = {\n      weSwiper: weSwiper\n    }\n\n    data = {\n      swiper: {\n        direction: 'vertical',\n        slideLength: 3,\n        /**\n         * swiper初始化后执行\n         * @param swiper\n         */\n        onInit (weswiper) {\n\n        },\n        /**\n         * 手指碰触slide时执行\n         * @param swiper\n         * @param event\n         */\n        onTouchStart (weswiper, event) {\n\n        },\n        /**\n         * 手指碰触slide并且滑动时执行\n         * @param swiper\n         * @param event\n         */\n        onTouchMove (weswiper, event) {\n\n        },\n        /**\n         * 手指离开slide时执行\n         * @param swiper\n         * @param event\n         */\n        onTouchEnd (weswiper, event) {\n\n        },\n        /**\n         *  slide达到过渡条件时执行\n         */\n        onSlideChangeStart (weswiper) {\n\n        },\n        /**\n         *  swiper从一个slide过渡到另一个slide结束时执行\n         */\n        onSlideChangeEnd (weswiper) {\n\n        },\n        /**\n         *  过渡时触发\n         */\n        onTransitionStart (weswiper) {\n\n        },\n        /**\n         *  过渡结束时执行\n         */\n        onTransitionEnd (weswiper) {\n\n        },\n        /**\n         *  手指触碰swiper并且拖动slide时执行\n         */\n        onSlideMove (weswiper) {\n\n        },\n        /**\n         * slide达到过渡条件 且规定了方向 向前（右、下）切换时执行\n         */\n        onSlideNextStart (weswiper) {\n\n        },\n        /**\n         *  slide达到过渡条件 且规定了方向 向前（右、下）切换结束时执行\n         */\n        onSlideNextEnd (weswiper) {\n\n        },\n        /**\n         *  slide达到过渡条件 且规定了方向 向前（左、上）切换时执行\n         */\n        onSlidePrevStart (swiper) {\n\n        },\n        /**\n         *  slide达到过渡条件 且规定了方向 向前（左、上）切换结束时执行\n         */\n        onSlidePrevEnd (weswiper) {\n\n        }\n      }\n    }\n    onLoad() {\n      setTimeout(() =\u003ethis.$invoke('weSwiper', 'slideTo', 2), 3000)\n    }\n  }\n\u003c/script\u003e\n\n    \n```\n\n## weSwiper初始化\n\nweSwiper通过获取props动态参数进行初始化\n\n在父组件中：\n\n```javascript\n   data = {\n     swiper: {\n       slideLength: 3,\n       direction: 'vertical',\n       ...\n     }\n   }\n```\n\n\n## 参数\n\n### 必填项\n\n\n#### slideLength\n\n- Type: `Number`\n- Default: `0`\n\n表示slide的页数\n\n### 可选项\n\n\n#### width\n\n- Type: `Number`\n- Default: `device.windowWidth`\n\n设定slide的宽度（横向滑动时slide滑动间隔距离会根据其值计算）\n\n\n#### height\n\n- Type: `Number`\n- Default: `device.windowHeight`\n\n设定slide的高度（纵向滑动时slide滑动间隔距离会根据其值计算）\n\n\n#### direction\n\n- Type: `String`\n- Default: `horizontal`\n- Option:\n    - `horizontal`: slide水平方向滑动\n    - `vertical`: slide垂直方向滑动\n\n设定slide滑动方向\n\n\n#### initialSlide\n\n- Type: `Number`\n- Default: `0`\n\n设定初始化时slide的索引\n\n\n#### speed\n\n- Type: `Number`\n- Default: `300`\n\n设定slide过渡时长\n\n\n#### timingFunction\n\n- Type: `String`\n- Default: `ease`\n- Option:\n    - `linear`: slide水平方向滑动\n    - `ease`: slide垂直方向滑动\n    - `ease-in`: slide垂直方向滑动\n    - `ease-in-out`: slide垂直方向滑动\n    - `ease-out`: slide垂直方向滑动\n    - `step-start`: slide垂直方向滑动\n    - `step-end`: slide垂直方向滑动\n    \n设定slide过渡动画速度曲线\n\n\n#### autoplay\n\n- Type: `Number`\n- Default: `0`\n\n设定slide自动播放间隔时长，设置为0时不自动播放\n\n\n#### directionViewName\n\n- Type: `String`\n- Default: `directionClass`\n\n对应视图中direction类名\n\n\n#### animationViewName\n\n- Type: `String`\n- Default: `animationData`\n\n对应视图中animation属性名         \n\n\n## 属性\n\n\n####  weswiper.activeIndex\n\n返回当前活动块(激活块)的索引\n\n\n####  weswiper.previousIndex\n\n返回上一个活动块的索引\n\n\n#### weswiper.width\n\n返回swiper容器的宽度\n\n\n####  weswiper.height\n\n返回swiper容器的高度\n\n\n####  weswiper.isBeginning\n\n如果swiper处于最初始位置，返回true\n\n\n####  weswiper.isEnd\n\n如果swiper处于最末尾位置，返回true\n\n\n####  weswiper.speed\n\n返回当前swiper的过渡时长\n\n\n## 方法\n\n\n####  slideNext(runCallbacks, speed)\n\n滑动到后一个slide\n\n- Params:\n    - `runCallbacks`:  可选，设为false不触发onSlideChange回调函数\n    - `speed`:  可选，切换速度\n    \n\n####  slidePrev(runCallbacks, speed)\n\n滑动到前一个slide。\n\n- Params:\n    - `runCallbacks`:  可选，设为false不触发onSlideChange回调函数\n    - `speed`:  可选，切换速度\n    \n\n####  slideTo(index, speed, runCallbacks)\n\n切换到指定slide。\n\n- Params:\n    - `index`:  必选，num，指定将要切换到的slide的索引\n    - `speed`:  可选，切换速度\n    - `runCallbacks`:  可选，设为false不触发onSlideChange回调函数\n    \n    \n## 事件回调\n\n\n####  onInit (weswiper)\n\n回调函数，初始化后执行。\n可选weswiper实例作为参数。\n\n\n####  onTouchStart (weswiper, event)\n\n回调函数，当碰触到slider时执行。可选weswiper和touchstart事件作为参数\n\n\n####  onTouchMove (weswiper, event)\n\n回调函数，手指触碰weswiper并滑动（手指）时执行。此时slide不一定会发生移动，比如你手指的移动方向和weswiper的切换方向垂直时\n\n\n####  onTouchEnd (weswiper, event)\n\n回调函数，当释放slider时执行。（释放即执行）\n\n\n####  onSlideChangeStart (weswiper)\n\n回调函数，weswiper从当前slide开始过渡到另一个slide时执行。触摸情况下，如果释放slide时没有达到过渡条件而回弹时不会触发这个函数，此时可用onTransitionStart。\n\n可接受weswiper实例作为参数，输出的activeIndex是过渡后的slide索引\n\n\n####  onSlideChangeEnd (weswiper)\n\n回调函数，weswiper从一个slide过渡到另一个slide结束时执行。\n\n可接受swiper实例作为参数。\n\n\n####  onTransitionStart (weswiper)\n\n回调函数，过渡开始时触发，接受weswiper实例作为参数。\n\n\n####  onTransitionEnd (weswiper)\n\n回调函数，过渡结束时触发，接收weswiper实例作为参数。\n\n\n####  onSlideMove (weswiper)\n     \n回调函数，手指触碰weswiper并拖动slide时执行。\n\n\n####  onSlideNextStart (weswiper)\n\n回调函数，滑块释放时如果触发slider向前(右、下)切换则执行。类似于onSlideChangeStart，但规定了方向。\n\n\n####  onSlideNextEnd (weswiper)\n\n回调函数，slider向前(右、下)切换结束时执行。类似于onSlideChangeEnd，但规定了方向。\n\n\n####  onSlidePrevStart (weswiper)\n\n回调函数，滑块释放时如果触发slider向后(左、上)切换则执行。类似于onSlideChangeStart，但规定了方向。\n\n####  onSlidePrevEnd (swiper)\n\n回调函数，slider向后(左、上)切换结束时执行。类似于onSlideChangeEnd，但规定了方向。\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwe-plugin%2Fwepy-com-swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwe-plugin%2Fwepy-com-swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwe-plugin%2Fwepy-com-swiper/lists"}