/hSwiper-wx

微信小程序swiper插件

Primary LanguageJavaScriptMIT LicenseMIT

hSwiper-wx

小程序swiper组件

license Version npm

使用此组件需要依赖小程序基础库 2.2.2 版本,同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档

旧版传送门,新版已经支持npm包安装

演示

  1. 水平

  1. 垂直

  1. 不循环

功能

  1. 支持水平,垂直滚动
  2. 支持循环无缝滚动
  3. 过渡位移效果支持自定义
  4. 过渡位移时间支持自定义
  5. 支持无限元素的滚动,而不会卡顿(未实现,待续...)

安装

  npm install --save hswiper-wx

使用

  1. 在页面的 json 配置文件中添加 hswiper-wx 自定义组件的配置
  {
    "usingComponents": {
      "hswiper": "hswiper-wx",
    }
  }
  1. 在项目根目录下创建如下目录文件
  --hSwiper
      --swiperTemplate.wxml
      --swiperTemplate.wxss
// swiperTemplate.wxml
// 每个视图的内容的wxml都写在该文件里面,使用 template标签 ,并且命名 ,当调用这里面的模版时,会自动注入 item以及 index数据,index表示是当前元素的元素索引 ,item则表示当前元素 数据。(相当于dataList[index]=item,但是 list不会注入到模版里面)

<template name="hSwiperItem">
  <view style="width: 100%; height: 100%;" class="imgBox">
    <view style="width: 100%; height: 100%;" class="imgBorder">
      <image class="imgOmg" mode="widthFix" src="{{item}}"></image>
    </view>
  </view>
</template>

<template name="hSwiperItem2">
  <view style="width: 100%; height: 100%;">
    {{item}}
  </view>
</template>

// swiperTemplate.wxss, swiperTemplate.wxml对应的样式
.imgBox {
  padding: 10px 10px;
  box-sizing: border-box;
  flex: 1;
  justify-content: center;
  align-items: center
}

.imgBorder {
  border: 1px solid #eee;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}

.imgOmg {
  display: block;
  width: 80%;
  height: 80%;
  border-radius: 6px;
}
  1. 在需要使用的页面的中
/// wxml中
<View style="width: 320px; height: 500px"
    class="swiper"
>
  <comp
    recycle="{{recyle}}"
    vertical="{{false}}"
    templateName="hSwiperItem"
    padding="{{30}}"
    moveTo="{{moveTo}}"
    bind:customevent="getRef"
    initIndex="{{2}}"
    width="{{320}}"
    height="{{500}}"
    animationType="ease-out"
    animationDuration="300"
    bind:firstView="firstView"
    bind:alreadyFirstView="alreadyFirstView"
    bind:beforeViewChange="beforeViewChange"
    bind:afterViewChange="afterViewChange"
    bind:lastView="lastView"
    bind:alreadyLastView="alreadyLastView"
    bind:move="viewMove"
    dataList="{{dataList}}"
  ></comp>
</View>
// js 中
Page({
  data: {
    dataList: [
      'http://statics.h-five.com/db2.jpg',
      'http://statics.h-five.com/db3.jpg',
      'http://statics.h-five.com/little-love.jpg',
      'http://statics.h-five.com/withme.jpg'
    ],
    dataList2: [0, 1, 2, 3, 4],
    moveTo: 0,
    recyle: false
  },
  onReady() {
    if (this.data.recyle) {
      setInterval(() => {
        this.setData({
          moveTo: (this.data.moveTo + 1) % this.data.dataList.length
        })
        console.log('change view')
      }, 1000)
    }
  },
  alreadyFirstView(e) {
    console.log('alreadyFirstView', e)
  },
  firstView(e) {
    console.log('firstView', e)
  },
  beforeViewChange(e) {
    console.log('beforeViewChange', e)
  },
  afterViewChange(e) {
    console.log('afterViewChange', e)
  },
  lastView(e) {
    console.log('lastView', e)
  },
  alreadyLastView(e) {
    console.log('alreadyLastView', e)
  },
  viewMove(e) {
    // console.log('viewMove', e)
  }
})

属性说明

字段名 类型 必填 描述
templateName String item对应的模版名称。全局设置,默认值为 _hswiper_emptyItem_default, 全局的,如果每个item需要使用不同的模版,可以在item中增加 templateName 属性值,该值会覆盖全局的 templateName
dataList Array 需要渲染的数据
width Number swiper 容器的宽度, 默认值为屏幕的宽度
height Number swiper 容器的高度, 默认值为屏幕的高度
recycle Boolean 是否循环滚动, 默认值 false
vertical Boolean 是否垂直滚动, 默认值 false
padding Number 该参数用于确定每个滚动元素的的宽度以及高度,每个元素的宽度为 width - (padding + paddingX) * 2, 高度为height - (padding + paddingY) * 2, 默认值为0
paddingX Number 同上, 默认值为0
paddingY Number 同上, 默认值为0
moveTo Number 当改属性改变后, 插件会跳转到指定索引的数据视图,0 < moveTo < dataList.length
moveToWithOutAnimation Number 同上,但无过渡动画
initIndex Number 插件初始化时 跳转的视图索引,默认值0
animationType String 过渡动画类型,['linear', 'ease-in', 'ease-in-out', 'ease-out', 'step-start', 'step-end']之一 ,默认值 ease
animationDuration Number 过渡动画时间,默认值 300

事件

事件名 描述
firstView 当跳转到的视图是第一个视图时触发
alreadyFirstView 非循环模式下,重复跳转到的视图是第一个视图时触发
beforeViewChange 视图跳转前触发
afterViewChange 视图跳转前触发
lastView 当跳转到的视图是最后个视图时触发
alreadyLastView 非循环模式下,重复跳转到的视图是最后个视图时触发
move 视图移动时触发
onTap 点击每个item时触发

具体使用 可查看example文件夹下的例子,有注释说明。欢迎提问!!!