hSwiper wxダウンロード - hSwiper wxソースコードのダウンロード

hSwiper wx

AI ソースコード

狮子座

ダウンロード

hSwiper-wx

ミニプログラムスワイパーコンポーネント

このコンポーネントを使用するには、ミニプログラム基本ライブラリバージョン 2.2.2 と開発者ツールの npm ビルドが必要です。具体的な詳細については、npm の公式ドキュメントを参照してください。

ポータルの古いバージョン、新しいバージョンはすでに npm パッケージのインストールをサポートしています

デモ

レベル

垂直

ループなし

関数

水平および垂直スクロールをサポート
ループのシームレスなスクロールをサポート
トランジションディスプレイスメントエフェクトがカスタマイズをサポート
遷移変位時間のカスタマイズをサポート
~~遅延のない無限要素のスクロールをサポート (未実装、続きます...)~~

インストール

  npm install -- save hswiper - wx

使用

ページの json 設定ファイルにhswiper-wxカスタムコンポーネントの設定を追加します。

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

プロジェクトのルートディレクトリに以下のディレクトリファイルを作成します。

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

使用する必要があるページでは、

 /// 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)
  }
} )

プロパティの説明

フィールド名	タイプ	必須	説明する
テンプレート名	弦	いいえ	アイテムに対応するテンプレート名。グローバル設定。デフォルト値は _hswiper_emptyItem_default (グローバル) です。各アイテムが異なるテンプレートを使用する必要がある場合は、グローバル templateName をオーバーライドする templateName 属性値をアイテムに追加できます。
データリスト	配列	はい	レンダリングされるデータ
幅	番号	いいえ	スワイパーコンテナの幅。デフォルト値は画面の幅です。
身長	番号	いいえ	スワイパーコンテナの高さ。デフォルト値は画面の高さです。
リサイクルする	ブール値	いいえ	循環的にスクロールするかどうか。デフォルト値`false`
垂直	ブール値	いいえ	垂直方向にスクロールするかどうか、デフォルト値は`false`
パディング	番号	いいえ	このパラメータは、各スクロール要素の幅と高さを決定するために使用されます。各要素の幅は`width - (padding + paddingX) * 2`で、高さは`height - (padding + paddingY) * 2`です。デフォルト値は 0 です。
パディングX	番号	いいえ	上記と同様、デフォルト値は 0 です。
パディングY	番号	いいえ	上記と同様、デフォルト値は 0 です。
移動先	番号	いいえ	プロパティが変更されると、プラグインは指定されたインデックス`0 < moveTo < dataList.length`のデータビューにジャンプします。
moveToWithOutAnimation	番号	いいえ	上記と同じですが、トランジションアニメーションはありません
initIndex	番号	いいえ	プラグインの初期化時にジャンプするビューのインデックス、デフォルト値は 0
アニメーションの種類	弦	いいえ	トランジションアニメーションタイプ、 `['linear', 'ease-in', 'ease-in-out', 'ease-out', 'step-start', 'step-end']`のいずれか、デフォルト値`ease`
アニメーション期間	番号	いいえ	トランジションアニメーション時間、デフォルト値 300

イベント

イベント名	説明する
最初のビュー	ビューが最初のビューにジャンプしたときにトリガーされます
すでに最初のビュー	非ループモードでは、繰り返しジャンプされるビューが最初のビューであるときにこれがトリガーされます。
beforeViewChange	ビュージャンプの前にトリガーされる
afterViewChange	ビュージャンプの前にトリガーされる
最終表示	ビューが最後のビューにジャンプしたときにトリガーされます
すでに最後のビュー	非ループモードでは、繰り返しジャンプされるビューが最後のビューになると、これがトリガーされます。
動く	ビューが移動すると発火します
オンタップ	各項目をクリックするとトリガーされます