hSwiper wx
狮子座
Composant de mini-programme swiper
L'utilisation de ce composant nécessite la version 2.2.2 de la Mini Program Basic Library et la version npm des outils de développement. Des détails spécifiques peuvent être trouvés dans la documentation officielle de npm.
L'ancienne version du portail, la nouvelle version prend déjà en charge l'installation du package npm
npm install -- save hswiper - wx hswiper-wx dans le fichier de configuration json de la page {
"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)
}
} ) | Nom du champ | taper | Requis | décrire |
|---|---|---|---|
| nom du modèle | Chaîne | Non | Le nom du modèle correspondant à l'élément. Paramètre global, la valeur par défaut est _hswiper_emptyItem_default, global Si chaque élément doit utiliser un modèle différent, vous pouvez ajouter la valeur de l'attribut templateName à l'élément, qui remplacera le templateName global. |
| liste de données | Tableau | Oui | Données à restituer |
| largeur | Nombre | Non | La largeur du conteneur swiper, la valeur par défaut est la largeur de l'écran |
| hauteur | Nombre | Non | La hauteur du conteneur swiper, la valeur par défaut est la hauteur de l'écran |
| recycler | Booléen | Non | S'il faut faire défiler de manière circulaire, la valeur par défaut false |
| verticale | Booléen | Non | S'il faut faire défiler verticalement, valeur par défaut false |
| rembourrage | Nombre | Non | Ce paramètre est utilisé pour déterminer la largeur et la hauteur de chaque élément de défilement. La largeur de chaque élément est width - (padding + paddingX) * 2 et la hauteur est height - (padding + paddingY) * 2 La valeur par défaut est 0. |
| rembourrageX | Nombre | Non | Comme ci-dessus, la valeur par défaut est 0 |
| rembourrageY | Nombre | Non | Comme ci-dessus, la valeur par défaut est 0 |
| déplacer vers | Nombre | Non | Lorsque la propriété est modifiée, le plug-in passe à la vue des données à l'index spécifié, 0 < moveTo < dataList.length |
| moveToWithOutAnimation | Nombre | Non | Comme ci-dessus, mais sans animation de transition |
| initIndex | Nombre | Non | Index d'affichage auquel accéder lors de l'initialisation du plug-in, valeur par défaut 0 |
| Type d'animation | Chaîne | Non | Type d'animation de transition, parmi ['linear', 'ease-in', 'ease-in-out', 'ease-out', 'step-start', 'step-end'] , ease par défaut |
| animationDurée | Nombre | Non | Temps d'animation de transition, valeur par défaut 300 |
| nom de l'événement | décrire |
|---|---|
| première vue | Déclenché lorsque la vue est accédée à la première vue |
| déjàFirstView | En mode sans boucle, cela se déclenche lorsque la vue à laquelle on accède à plusieurs reprises est la première vue. |
| avantViewChange | Déclenché avant le saut de vue |
| aprèsViewChange | Déclenché avant le saut de vue |
| dernière vue | Déclenché lorsque la vue est passée à la dernière vue |
| déjàLastView | En mode sans boucle, cela se déclenche lorsque la vue à laquelle on accède à plusieurs reprises est la dernière vue. |
| se déplacer | Se déclenche lorsque la vue bouge |
| au robinet | Déclenché lorsque chaque élément est cliqué |
