├── .gitignore ├── .npmignore ├── wepy.config.js ├── package.json ├── LICENSE ├── README.md └── swiper.wpy /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | sftp-config.json 3 | diff 4 | log 5 | npm-debug.log 6 | lib/ 7 | demo/ 8 | dist/ 9 | .vscode 10 | .idea/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | src/ 3 | coverage/ 4 | demo/ 5 | test/ 6 | ISSUE_TEMPLATE.md 7 | appveyor.yml 8 | README_zh-CN.md 9 | *.map 10 | wepy.config.js 11 | .gitignore -------------------------------------------------------------------------------- /wepy.config.js: -------------------------------------------------------------------------------- 1 | var prod = process.env.NODE_ENV === 'production' 2 | 3 | module.exports = { 4 | wpyExt: '.wpy', 5 | eslint: true, 6 | compilers: { 7 | less: { 8 | compress: true 9 | }, 10 | /*sass: { 11 | outputStyle: 'compressed' 12 | },*/ 13 | babel: { 14 | sourceMap: true, 15 | presets: [ 16 | 'es2015', 17 | 'stage-1' 18 | ], 19 | plugins: [ 20 | 'transform-export-extensions', 21 | 'syntax-export-extensions' 22 | ] 23 | } 24 | }, 25 | plugins: { 26 | } 27 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wepy-com-swiper", 3 | "version": "1.0.1", 4 | "description": "", 5 | "main": "swiper.wpy", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "release": "npx release-it --no-requireCleanWorkingDir" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/dlhandsome/wepy-com-swiper.git" 13 | }, 14 | "author": "dlhandsome", 15 | "license": "MIT", 16 | "dependencies": { 17 | "babel": "^6.5.2", 18 | "babel-cli": "^6.18.0", 19 | "babel-preset-es2015": "^6.18.0", 20 | "babel-preset-stage-1": "^6.16.0" 21 | }, 22 | "devDependencies": { 23 | "release-it": "^7.6.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Sail 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wepy-com-swiper 2 | 微信小程序触摸内容滑动解决方案，适用于wepy框架 3 | 4 | ### 为什么要开发这款插件 5 | #### 官方swiper组件： 6 | * 支持的事件回调很单一 7 | * 从文档上看只是能支持横向滑动 8 | * 拓展性不强 9 | 10 | #### wepy-com-swiper插件: 11 | * 丰富的事件回调 12 | * 丰富的属性 13 | * 支持横、纵向滑动 14 | * 强拓展（可在原插件基础上二次开发） 15 | 16 | ## ScreenShots 17 | #### 横向滚动 18 | ![Alt text](https://github.com/we-plugin/we-swiper/blob/master/screenshots/Gif_20170401_013729.gif?raw=true) 19 | #### 纵向滚动 20 | ![Alt text](https://github.com/we-plugin/we-swiper/blob/master/screenshots/Gif_20170401_013701.gif?raw=true) 21 | 22 | ## 安装组件 23 | ```bash 24 | npm install wepy-com-swiper --save 25 | ``` 26 | 27 | ## 示例 28 | #### index.wpy 29 | ``` 30 | 49 | 58 | 59 | 167 | 168 | 169 | ``` 170 | 171 | ## weSwiper初始化 172 | 173 | weSwiper通过获取props动态参数进行初始化 174 | 175 | 在父组件中： 176 | 177 | ```javascript 178 | data = { 179 | swiper: { 180 | slideLength: 3, 181 | direction: 'vertical', 182 | ... 183 | } 184 | } 185 | ``` 186 | 187 | 188 | ## 参数 189 | 190 | ### 必填项 191 | 192 | 193 | #### slideLength 194 | 195 | - Type: `Number` 196 | - Default: `0` 197 | 198 | 表示slide的页数 199 | 200 | ### 可选项 201 | 202 | 203 | #### width 204 | 205 | - Type: `Number` 206 | - Default: `device.windowWidth` 207 | 208 | 设定slide的宽度（横向滑动时slide滑动间隔距离会根据其值计算） 209 | 210 | 211 | #### height 212 | 213 | - Type: `Number` 214 | - Default: `device.windowHeight` 215 | 216 | 设定slide的高度（纵向滑动时slide滑动间隔距离会根据其值计算） 217 | 218 | 219 | #### direction 220 | 221 | - Type: `String` 222 | - Default: `horizontal` 223 | - Option: 224 | - `horizontal`: slide水平方向滑动 225 | - `vertical`: slide垂直方向滑动 226 | 227 | 设定slide滑动方向 228 | 229 | 230 | #### initialSlide 231 | 232 | - Type: `Number` 233 | - Default: `0` 234 | 235 | 设定初始化时slide的索引 236 | 237 | 238 | #### speed 239 | 240 | - Type: `Number` 241 | - Default: `300` 242 | 243 | 设定slide过渡时长 244 | 245 | 246 | #### timingFunction 247 | 248 | - Type: `String` 249 | - Default: `ease` 250 | - Option: 251 | - `linear`: slide水平方向滑动 252 | - `ease`: slide垂直方向滑动 253 | - `ease-in`: slide垂直方向滑动 254 | - `ease-in-out`: slide垂直方向滑动 255 | - `ease-out`: slide垂直方向滑动 256 | - `step-start`: slide垂直方向滑动 257 | - `step-end`: slide垂直方向滑动 258 | 259 | 设定slide过渡动画速度曲线 260 | 261 | 262 | #### autoplay 263 | 264 | - Type: `Number` 265 | - Default: `0` 266 | 267 | 设定slide自动播放间隔时长，设置为0时不自动播放 268 | 269 | 270 | #### directionViewName 271 | 272 | - Type: `String` 273 | - Default: `directionClass` 274 | 275 | 对应视图中direction类名 276 | 277 | 278 | #### animationViewName 279 | 280 | - Type: `String` 281 | - Default: `animationData` 282 | 283 | 对应视图中animation属性名 284 | 285 | 286 | ## 属性 287 | 288 | 289 | #### weswiper.activeIndex 290 | 291 | 返回当前活动块(激活块)的索引 292 | 293 | 294 | #### weswiper.previousIndex 295 | 296 | 返回上一个活动块的索引 297 | 298 | 299 | #### weswiper.width 300 | 301 | 返回swiper容器的宽度 302 | 303 | 304 | #### weswiper.height 305 | 306 | 返回swiper容器的高度 307 | 308 | 309 | #### weswiper.isBeginning 310 | 311 | 如果swiper处于最初始位置，返回true 312 | 313 | 314 | #### weswiper.isEnd 315 | 316 | 如果swiper处于最末尾位置，返回true 317 | 318 | 319 | #### weswiper.speed 320 | 321 | 返回当前swiper的过渡时长 322 | 323 | 324 | ## 方法 325 | 326 | 327 | #### slideNext(runCallbacks, speed) 328 | 329 | 滑动到后一个slide 330 | 331 | - Params: 332 | - `runCallbacks`: 可选，设为false不触发onSlideChange回调函数 333 | - `speed`: 可选，切换速度 334 | 335 | 336 | #### slidePrev(runCallbacks, speed) 337 | 338 | 滑动到前一个slide。 339 | 340 | - Params: 341 | - `runCallbacks`: 可选，设为false不触发onSlideChange回调函数 342 | - `speed`: 可选，切换速度 343 | 344 | 345 | #### slideTo(index, speed, runCallbacks) 346 | 347 | 切换到指定slide。 348 | 349 | - Params: 350 | - `index`: 必选，num，指定将要切换到的slide的索引 351 | - `speed`: 可选，切换速度 352 | - `runCallbacks`: 可选，设为false不触发onSlideChange回调函数 353 | 354 | 355 | ## 事件回调 356 | 357 | 358 | #### onInit (weswiper) 359 | 360 | 回调函数，初始化后执行。 361 | 可选weswiper实例作为参数。 362 | 363 | 364 | #### onTouchStart (weswiper, event) 365 | 366 | 回调函数，当碰触到slider时执行。可选weswiper和touchstart事件作为参数 367 | 368 | 369 | #### onTouchMove (weswiper, event) 370 | 371 | 回调函数，手指触碰weswiper并滑动（手指）时执行。此时slide不一定会发生移动，比如你手指的移动方向和weswiper的切换方向垂直时 372 | 373 | 374 | #### onTouchEnd (weswiper, event) 375 | 376 | 回调函数，当释放slider时执行。（释放即执行） 377 | 378 | 379 | #### onSlideChangeStart (weswiper) 380 | 381 | 回调函数，weswiper从当前slide开始过渡到另一个slide时执行。触摸情况下，如果释放slide时没有达到过渡条件而回弹时不会触发这个函数，此时可用onTransitionStart。 382 | 383 | 可接受weswiper实例作为参数，输出的activeIndex是过渡后的slide索引 384 | 385 | 386 | #### onSlideChangeEnd (weswiper) 387 | 388 | 回调函数，weswiper从一个slide过渡到另一个slide结束时执行。 389 | 390 | 可接受swiper实例作为参数。 391 | 392 | 393 | #### onTransitionStart (weswiper) 394 | 395 | 回调函数，过渡开始时触发，接受weswiper实例作为参数。 396 | 397 | 398 | #### onTransitionEnd (weswiper) 399 | 400 | 回调函数，过渡结束时触发，接收weswiper实例作为参数。 401 | 402 | 403 | #### onSlideMove (weswiper) 404 | 405 | 回调函数，手指触碰weswiper并拖动slide时执行。 406 | 407 | 408 | #### onSlideNextStart (weswiper) 409 | 410 | 回调函数，滑块释放时如果触发slider向前(右、下)切换则执行。类似于onSlideChangeStart，但规定了方向。 411 | 412 | 413 | #### onSlideNextEnd (weswiper) 414 | 415 | 回调函数，slider向前(右、下)切换结束时执行。类似于onSlideChangeEnd，但规定了方向。 416 | 417 | 418 | #### onSlidePrevStart (weswiper) 419 | 420 | 回调函数，滑块释放时如果触发slider向后(左、上)切换则执行。类似于onSlideChangeStart，但规定了方向。 421 | 422 | #### onSlidePrevEnd (swiper) 423 | 424 | 回调函数，slider向后(左、上)切换结束时执行。类似于onSlideChangeEnd，但规定了方向。 425 | 426 | 427 | 428 | 429 | 430 | -------------------------------------------------------------------------------- /swiper.wpy: -------------------------------------------------------------------------------- 1 | 12 | 13 | 348 | 349 | 405 | --------------------------------------------------------------------------------