{"id":25023102,"url":"https://github.com/hlerenow/hswiper-wx","last_synced_at":"2025-04-13T08:09:01.042Z","repository":{"id":123299997,"uuid":"89710403","full_name":"hlerenow/hSwiper-wx","owner":"hlerenow","description":"微信小程序swiper插件","archived":false,"fork":false,"pushed_at":"2020-06-09T11:50:03.000Z","size":12141,"stargazers_count":173,"open_issues_count":0,"forks_count":32,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T08:08:26.906Z","etag":null,"topics":["hswiper-wx","javascript","swipe","swiper","wechat","wxapp","wxchat","wxml","wxss","wxswiper"],"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/hlerenow.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-28T13:50:01.000Z","updated_at":"2024-10-29T06:47:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"c52440cf-0def-4376-b251-7b877008bda7","html_url":"https://github.com/hlerenow/hSwiper-wx","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlerenow%2FhSwiper-wx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlerenow%2FhSwiper-wx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlerenow%2FhSwiper-wx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlerenow%2FhSwiper-wx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hlerenow","download_url":"https://codeload.github.com/hlerenow/hSwiper-wx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681489,"owners_count":21144700,"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":["hswiper-wx","javascript","swipe","swiper","wechat","wxapp","wxchat","wxml","wxss","wxswiper"],"created_at":"2025-02-05T14:36:15.266Z","updated_at":"2025-04-13T08:09:01.033Z","avatar_url":"https://github.com/hlerenow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hSwiper-wx\n小程序swiper组件\n\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()\n[![Version](https://img.shields.io/npm/v/hswiper-wx.svg)](https://www.npmjs.com/package/hswiper-wx)\n[![npm](https://img.shields.io/npm/dt/hswiper-wx.svg)](https://www.npmjs.com/package/hswiper-wx)\n\n\n\u003e 使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅[官方 npm 文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。\n\n\u003e [旧版传送门](https://github.com/hlerenow/hSwiper/tree/hswiper1.0)，新版已经支持npm包安装\n\n## 演示\n\n1. 水平\n\u003cbr/\u003e\n\u003cimg src=\"https://github.com/hlerenow/hSwiper/blob/hSwiper-2.0/h1.gif?raw=true\" width=\"350\" style=\"max-width:100%;width: 350px;\"\u003e\n\n2. 垂直\n\u003cbr/\u003e\n\u003cimg src=\"https://github.com/hlerenow/hSwiper/blob/hSwiper-2.0/v1.gif?raw=true\" width=\"350\"  style=\"max-width:100%;width: 350px;\"\u003e\n\n3. 不循环\n\u003cbr/\u003e\n\u003cimg src=\"https://github.com/hlerenow/hSwiper/blob/hSwiper-2.0/nocyle1.gif?raw=true\" width=\"350\"  style=\"max-width:100%;width: 350px;\"\u003e\n\n\n## 功能\n1. 支持水平，垂直滚动\n2. 支持循环无缝滚动\n3. 过渡位移效果支持自定义\n4. 过渡位移时间支持自定义\n5. ~~支持无限元素的滚动，而不会卡顿（未实现，待续...)~~\n\n\n## 安装\n\n```javascript\n  npm install --save hswiper-wx\n```\n\n\n## 使用\n\n1. 在页面的 json 配置文件中添加 ```hswiper-wx``` 自定义组件的配置\n\n```json\n  {\n    \"usingComponents\": {\n      \"hswiper\": \"hswiper-wx\",\n    }\n  }\n```\n\n2. 在项目根目录下创建如下目录文件\n```\n  --hSwiper\n      --swiperTemplate.wxml\n      --swiperTemplate.wxss\n```\n\n\n```\n// swiperTemplate.wxml\n// 每个视图的内容的wxml都写在该文件里面，使用 template标签 ，并且命名 ,当调用这里面的模版时，会自动注入 item以及 index数据，index表示是当前元素的元素索引 ，item则表示当前元素 数据。（相当于dataList[index]=item，但是 list不会注入到模版里面）\n\n\u003ctemplate name=\"hSwiperItem\"\u003e\n  \u003cview style=\"width: 100%; height: 100%;\" class=\"imgBox\"\u003e\n    \u003cview style=\"width: 100%; height: 100%;\" class=\"imgBorder\"\u003e\n      \u003cimage class=\"imgOmg\" mode=\"widthFix\" src=\"{{item}}\"\u003e\u003c/image\u003e\n    \u003c/view\u003e\n  \u003c/view\u003e\n\u003c/template\u003e\n\n\u003ctemplate name=\"hSwiperItem2\"\u003e\n  \u003cview style=\"width: 100%; height: 100%;\"\u003e\n    {{item}}\n  \u003c/view\u003e\n\u003c/template\u003e\n\n```\n\n```\n// swiperTemplate.wxss, swiperTemplate.wxml对应的样式\n.imgBox {\n  padding: 10px 10px;\n  box-sizing: border-box;\n  flex: 1;\n  justify-content: center;\n  align-items: center\n}\n\n.imgBorder {\n  border: 1px solid #eee;\n  padding: 20px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 6px;\n}\n\n.imgOmg {\n  display: block;\n  width: 80%;\n  height: 80%;\n  border-radius: 6px;\n}\n```\n\n3. 在需要使用的页面的中\n```javascript\n/// wxml中\n\u003cView style=\"width: 320px; height: 500px\"\n    class=\"swiper\"\n\u003e\n  \u003ccomp\n    recycle=\"{{recyle}}\"\n    vertical=\"{{false}}\"\n    templateName=\"hSwiperItem\"\n    padding=\"{{30}}\"\n    moveTo=\"{{moveTo}}\"\n    bind:customevent=\"getRef\"\n    initIndex=\"{{2}}\"\n    width=\"{{320}}\"\n    height=\"{{500}}\"\n    animationType=\"ease-out\"\n    animationDuration=\"300\"\n    bind:firstView=\"firstView\"\n    bind:alreadyFirstView=\"alreadyFirstView\"\n    bind:beforeViewChange=\"beforeViewChange\"\n    bind:afterViewChange=\"afterViewChange\"\n    bind:lastView=\"lastView\"\n    bind:alreadyLastView=\"alreadyLastView\"\n    bind:move=\"viewMove\"\n    dataList=\"{{dataList}}\"\n  \u003e\u003c/comp\u003e\n\u003c/View\u003e\n```\n\n```javascript\n// js 中\nPage({\n  data: {\n    dataList: [\n      'http://statics.h-five.com/db2.jpg',\n      'http://statics.h-five.com/db3.jpg',\n      'http://statics.h-five.com/little-love.jpg',\n      'http://statics.h-five.com/withme.jpg'\n    ],\n    dataList2: [0, 1, 2, 3, 4],\n    moveTo: 0,\n    recyle: false\n  },\n  onReady() {\n    if (this.data.recyle) {\n      setInterval(() =\u003e {\n        this.setData({\n          moveTo: (this.data.moveTo + 1) % this.data.dataList.length\n        })\n        console.log('change view')\n      }, 1000)\n    }\n  },\n  alreadyFirstView(e) {\n    console.log('alreadyFirstView', e)\n  },\n  firstView(e) {\n    console.log('firstView', e)\n  },\n  beforeViewChange(e) {\n    console.log('beforeViewChange', e)\n  },\n  afterViewChange(e) {\n    console.log('afterViewChange', e)\n  },\n  lastView(e) {\n    console.log('lastView', e)\n  },\n  alreadyLastView(e) {\n    console.log('alreadyLastView', e)\n  },\n  viewMove(e) {\n    // console.log('viewMove', e)\n  }\n})\n```\n\n\n\n\n## 属性说明\n\n| 字段名                      | 类型     | 必填  | 描述                                      |\n| -------------------------- | ----    | ---- | ----------------------------------------- |\n|templateName                | String  | 否   | item对应的模版名称。全局设置，默认值为 _hswiper_emptyItem_default, 全局的，如果每个item需要使用不同的模版，可以在item中增加 templateName 属性值，该值会覆盖全局的  templateName   |\n| dataList                   | Array   | 是   | 需要渲染的数据         |\n| width                      | Number  | 否   | swiper 容器的宽度, 默认值为屏幕的宽度          |\n| height                     | Number  | 否   | swiper 容器的高度, 默认值为屏幕的高度          |\n| recycle                    | Boolean | 否   | 是否循环滚动， 默认值 ```false```            |\n| vertical                   | Boolean | 否   | 是否垂直滚动， 默认值 ```false```     |\n| padding                    | Number  | 否   | 该参数用于确定每个滚动元素的的宽度以及高度，每个元素的宽度为 ```width - (padding + paddingX) * 2```, 高度为```height - (padding + paddingY) * 2```, 默认值为0|\n| paddingX                   | Number  | 否   | 同上， 默认值为0                            |\n| paddingY                   | Number  | 否   | 同上， 默认值为0                            |\n| moveTo                     | Number  | 否   | 当改属性改变后， 插件会跳转到指定索引的数据视图，```0 \u003c moveTo \u003c dataList.length```|\n| moveToWithOutAnimation     | Number  | 否   | 同上，但无过渡动画                           |\n| initIndex                  | Number  | 否   | 插件初始化时 跳转的视图索引，默认值0                   |\n| animationType              | String  | 否   | 过渡动画类型，```['linear', 'ease-in', 'ease-in-out', 'ease-out', 'step-start', 'step-end']```之一 ,默认值 ```ease```    |\n| animationDuration          | Number  | 否   | 过渡动画时间，默认值 300     |\n\n\n\n\n\n## 事件\n\n| 事件名                      | 描述                                      |\n| ---                        |------                                    |\n| firstView                  | 当跳转到的视图是第一个视图时触发              |\n| alreadyFirstView           | 非循环模式下，重复跳转到的视图是第一个视图时触发 |\n| beforeViewChange           | 视图跳转前触发                             |\n| afterViewChange            | 视图跳转前触发                             |\n| lastView                   | 当跳转到的视图是最后个视图时触发              |\n| alreadyLastView            | 非循环模式下，重复跳转到的视图是最后个视图时触发 |\n| move                       | 视图移动时触发                              |\n| onTap                      | 点击每个item时触发                          |\n\n\n\n\n\n------------\n\n\n## 具体使用 可查看example文件夹下的例子，有注释说明。欢迎提问！！！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhlerenow%2Fhswiper-wx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhlerenow%2Fhswiper-wx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhlerenow%2Fhswiper-wx/lists"}