微信小程序 滾動插件 hSwiper2.0

hSwiper-wx

小程序swiper組件

使用此組件需要依賴小程序基礎庫 2.2.2 版本，同時依賴開發者工具的 npm 構建。具體詳情可查閱官方 npm 文檔。

新版傳送門，新版已經支持npm包安裝
舊版傳送門，新版已經支持npm包安裝

演示

1. 水平
   
   
   

2. 垂直
   
   
   

3. 不循環
   
   
   

功能

1. 支持水平，垂直滾動
2. 支持循環無縫滾動
3. 過渡位移效果支持自定義
4. 過渡位移時間支持自定義
5. 支持無限元素的滾動，而不會卡頓（未實現，待續...)

安裝

  npm install --save hswiper-wx

小程序npm構建參考

使用

1. 在頁面的 json 配置文件中添加 recycle-view 和 recycle-item 自定義組件的配置

  {
    "usingComponents": {
      "hswiper": "hswiper-wx",
    }
  }

2. 在項目根目錄下創建如下目錄文件

  --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;
}

3. 在需要使用的頁面的中

/// 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	視圖移動時觸發

---

具體使用 可查看example文件夾下的例子，有注釋說明。歡迎提問！！！