{"id":20114053,"url":"https://github.com/we-plugin/we-swiper","last_synced_at":"2025-10-05T04:04:25.557Z","repository":{"id":112515761,"uuid":"86711460","full_name":"we-plugin/we-swiper","owner":"we-plugin","description":":sparkles: 微信小程序触摸内容滑动解决方案we-swiper","archived":false,"fork":false,"pushed_at":"2018-09-11T03:32:07.000Z","size":676,"stargazers_count":321,"open_issues_count":20,"forks_count":58,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-07-25T01:04:07.189Z","etag":null,"topics":["slide","swipe","weapp","wechat","weswiper-slide"],"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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-30T14:21:19.000Z","updated_at":"2025-05-15T08:05:49.000Z","dependencies_parsed_at":"2023-05-15T14:30:33.804Z","dependency_job_id":null,"html_url":"https://github.com/we-plugin/we-swiper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/we-plugin/we-swiper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/we-plugin%2Fwe-swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/we-plugin%2Fwe-swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/we-plugin%2Fwe-swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/we-plugin%2Fwe-swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/we-plugin","download_url":"https://codeload.github.com/we-plugin/we-swiper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/we-plugin%2Fwe-swiper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272475015,"owners_count":24940665,"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","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["slide","swipe","weapp","wechat","weswiper-slide"],"created_at":"2024-11-13T18:27:55.569Z","updated_at":"2025-10-05T04:04:20.467Z","avatar_url":"https://github.com/we-plugin.png","language":"JavaScript","funding_links":[],"categories":["组件"],"sub_categories":[],"readme":"# we-swiper\n微信小程序触摸内容滑动解决方案，API设计细节及命名参考于[swiper.js](http://www.swiper.com.cn/).\n### 为什么要开发这款插件\n#### 官方swiper组件：\n* 支持的事件回调很单一\n* ~~从文档上看只是能支持横向滑动~~(官方swiper组件实际是支持纵向滚动的，设置属性vertical=\"true\"即可，但并未在官方文档提及，感谢[@pangz1](https://github.com/pangz1)指正)\n* 拓展性不强\n\n#### we-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#### 克隆项目至你的目录\n```bash\ncd my-project\n\ngit clone https://github.com/dlhandsome/we-swiper.git\n```\n\n#### 在项目文件引入``` dist/weSwiper.js```进行开发\n\n##### es6 module\n``` javascript\nimport weSwiper from 'dist/weSwiper'\n```\n##### commonjs\n```javascript\nvar weSwiper = require('dist/weSwiper')\n```\n\n## 示例\n#### example.wxml\n``` html\n \u003cview class=\"we-container {{directionClass}}\"\u003e\n  \u003cview class=\"we-wrapper\"\n    bindtouchstart=\"touchstart\"\n    bindtouchmove=\"touchmove\"\n    bindtouchend=\"touchend\"\n    animation=\"{{animationData}}\"\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/view\u003e\n\u003c/view\u003e\n```\n#### example.js\n``` javascript\nimport weSwiper from '../dist/weSwiper'\n\nconst option = {\n  touchstart (e) {\n    this.weswiper.touchstart(e)\n  },\n  touchmove (e) {\n    this.weswiper.touchmove(e)\n  },\n  touchend (e) {\n    this.weswiper.touchend(e)\n  },\n  onLoad () {\n    new weSwiper({\n      animationViewName: 'animationData',\n      slideLength: 3,\n      initialSlide: 0,\n      /**\n       * swiper初始化后执行\n       * @param weswiper\n       */\n      onInit (weswiper) {\n\n      },\n      /**\n       * 手指碰触slide时执行\n       * @param weswiper\n       * @param event\n       */\n      onTouchStart (weswiper, event) {\n\n      },\n      /**\n       * 手指碰触slide并且滑动时执行\n       * @param weswiper\n       * @param event\n       */\n      onTouchMove (weswiper, event) {\n\n      },\n      /**\n       * 手指离开slide时执行\n       * @param weswiper\n       * @param event\n       */\n      onTouchEnd (weswiper, event) {\n\n      },\n      /**\n       *  slide达到过渡条件时执行\n       */\n      onSlideChangeStart (weswiper) {\n\n      },\n      /**\n       *  weswiper从一个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       *  手指触碰weswiper并且拖动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}\nPage(option)\n\n```\n\n## we-swiper初始化\n\n#### weSwiper在onLoad方法中实例化\n\n```javascript\nonLoad () {\n  new weSwiper({\n    slideLength: 3  // 必填，由于目前无法直接获取slide页数，目前只能通过参数写入\n  }) \n}\n```\n\n#### 可通过this.weswiper在Page的钩子函数中访问实例\n\n```javascript\ntouchstart (e) {\n  this.weswiper.touchstart(e)\n}\n```\n\n#### WXML结构配置\n\n```html\n\u003cview class=\"we-container {{directionClass}}\"\u003e\n  \u003cview class=\"we-wrapper\"\n    bindtouchstart=\"touchstart\"\n    bindtouchmove=\"touchmove\"\n    bindtouchend=\"touchend\"\n    animation=\"{{animationData}}\"\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/view\u003e\n\u003c/view\u003e\n```\n小提示：WXML中的字段不需要在Page的data中给出默认值，we-swiper内部有同步视图机制。\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####  weswiper.slideNext(runCallbacks, speed)\n\n滑动到后一个slide\n\n- Params:\n    - `runCallbacks`:  可选，设为false不触发onSlideChange回调函数\n    - `speed`:  可选，切换速度\n    \n\n####  weswiper.slidePrev(runCallbacks, speed)\n\n滑动到前一个slide。\n\n- Params:\n    - `runCallbacks`:  可选，设为false不触发onSlideChange回调函数\n    - `speed`:  可选，切换速度\n    \n\n####  weswiper.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 (weswiper)\n\n回调函数，slider向后(左、上)切换结束时执行。类似于onSlideChangeEnd，但规定了方向。\n\n\n## TODO\n\n- 增加切换效果：fade，flip等\n\n## License\nThe MIT License(http://opensource.org/licenses/MIT)\n\n请自由地享受和参与开源\n\n## 贡献\n\n如果你有好的意见或建议，欢迎给我提issue或pull request。\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwe-plugin%2Fwe-swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwe-plugin%2Fwe-swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwe-plugin%2Fwe-swiper/lists"}