Загрузка hSwiper wx - Загрузка исходного кода hSwiper wx

hSwiper wx

AI Исходный код

狮子座

Скачать

hSwiper-wx

Компонент мини-программы Swiper

Для использования этого компонента требуется базовая библиотека мини-программ версии 2.2.2 и сборка инструментов разработчика npm. Подробности можно найти в официальной документации npm.

Старая версия портала, новая версия уже поддерживает установку пакетов npm.

Демо

уровень

вертикальный

Нет цикла

Функция

Поддержка горизонтальной и вертикальной прокрутки
Поддержка плавной прокрутки цикла
Эффект смещения перехода поддерживает настройку
Время смещения перехода поддерживает настройку
~~Поддержка прокрутки бесконечных элементов без задержек (не реализовано, продолжение следует...)~~

Установить

  npm install -- save hswiper - wx

использовать

Добавьте конфигурацию пользовательского компонента hswiper-wx в файл конфигурации json страницы.

  {
    "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, которое переопределит глобальное имя шаблона.
список данных	Множество	да	Данные для визуализации
ширина	Число	нет	Ширина контейнера свайпа, значение по умолчанию — ширина экрана.
высота	Число	нет	Высота контейнера свайпа, значение по умолчанию — высота экрана.
перерабатывать	логическое значение	нет	Прокручивать ли круговую прокрутку, значение по умолчанию `false`
вертикальный	логическое значение	нет	Прокручивать ли по вертикали, значение по умолчанию `false`
прокладка	Число	нет	Этот параметр используется для определения ширины и высоты каждого элемента прокрутки. Ширина каждого элемента равна `width - (padding + paddingX) * 2` , а высота — `height - (padding + paddingY) * 2` Значение по умолчанию — 0.
отступX	Число	нет	То же, что и выше, значение по умолчанию — 0.
отступY	Число	нет	То же, что и выше, значение по умолчанию — 0.
переместитьTo	Число	нет	При изменении свойства плагин перейдет к представлению данных по указанному индексу: `0 < moveTo < dataList.length`
перемещениеToWithOutAnimation	Число	нет	То же, что и выше, но без анимации перехода.
initIndex	Число	нет	Индекс просмотра для перехода при инициализации плагина, значение по умолчанию 0
Тип анимации	Нить	нет	Тип анимации перехода, один из `['linear', 'ease-in', 'ease-in-out', 'ease-out', 'step-start', 'step-end']` , значение по умолчанию `ease`
анимацияПродолжительность	Число	нет	Время анимации перехода, значение по умолчанию 300.

событие

название события	описывать
первый просмотр	Срабатывает, когда представление, к которому осуществляется переход, является первым представлением.
ужеFirstView	В режиме без цикла это срабатывает, когда представление, к которому неоднократно осуществляется переход, является первым представлением.
перед просмотром изменения	Срабатывает перед переходом к просмотру
послеViewChange	Срабатывает перед переходом к просмотру
последний просмотр	Срабатывает, когда просмотр, к которому был выполнен переход, является последним просмотром.
ужеLastView	В режиме без цикла это срабатывает, когда представление, к которому происходит повторный переход, является последним представлением.
двигаться	Срабатывает при перемещении представления
onTap	Срабатывает при нажатии на каждый элемент