hSwiper wx
狮子座
Komponen penggesek program mini
Penggunaan komponen ini memerlukan Mini Program Basic Library versi 2.2.2 dan npm build dari alat pengembang. Detail spesifiknya dapat ditemukan di dokumentasi resmi npm.
Portal versi lama, versi baru sudah mendukung instalasi paket npm
npm install -- save hswiper - wx
hswiper-wx
di file konfigurasi json halaman {
"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)
}
} )
Nama bidang | jenis | Diperlukan | menggambarkan |
---|---|---|---|
nama templat | Rangkaian | TIDAK | Nama templat yang sesuai dengan item tersebut. Pengaturan global, nilai defaultnya adalah _hswiper_emptyItem_default, global. Jika setiap item perlu menggunakan template yang berbeda, Anda dapat menambahkan nilai atribut templateName ke item, yang akan menggantikan templateName global. |
Daftar data | Himpunan | Ya | Data yang akan dirender |
lebar | Nomor | TIDAK | Lebar wadah wiper, nilai defaultnya adalah lebar layar |
tinggi | Nomor | TIDAK | Ketinggian wadah penggesek, nilai defaultnya adalah tinggi layar |
mendaur ulang | Boolean | TIDAK | Apakah akan menggulir secara melingkar, nilai defaultnya false |
vertikal | Boolean | TIDAK | Apakah akan menggulir secara vertikal, nilai defaultnya false |
lapisan | Nomor | TIDAK | Parameter ini digunakan untuk menentukan lebar dan tinggi setiap elemen gulir. Lebar setiap elemen adalah width - (padding + paddingX) * 2 , dan tingginya adalah height - (padding + paddingY) * 2 Nilai defaultnya adalah 0 |
bantalanX | Nomor | TIDAK | Sama seperti di atas, nilai defaultnya adalah 0 |
bantalanY | Nomor | TIDAK | Sama seperti di atas, nilai defaultnya adalah 0 |
pindah ke | Nomor | TIDAK | Ketika properti diubah, plugin akan melompat ke tampilan data pada indeks yang ditentukan, 0 < moveTo < dataList.length |
moveToWithOutAnimation | Nomor | TIDAK | Sama seperti di atas, namun tanpa animasi transisi |
initIndex | Nomor | TIDAK | Lihat indeks untuk melompat ketika menginisialisasi plug-in, nilai default 0 |
Tipe animasi | Rangkaian | TIDAK | Jenis animasi transisi, salah satu dari ['linear', 'ease-in', 'ease-in-out', 'ease-out', 'step-start', 'step-end'] , nilai default ease |
durasi animasi | Nomor | TIDAK | Waktu animasi transisi, nilai default 300 |
nama acara | menggambarkan |
---|---|
tampilan pertama | Dipicu saat tampilan melompat ke tampilan pertama |
sudahFirstView | Dalam mode non-loop, ini terpicu ketika tampilan yang dilompati berulang kali adalah tampilan pertama. |
sebelumLihatPerubahan | Dipicu sebelum tampilan melompat |
setelahViewChange | Dipicu sebelum tampilan melompat |
tampilan terakhir | Dipicu saat tampilan melompat ke tampilan terakhir |
sudahTampilan Terakhir | Dalam mode non-loop, ini terpicu ketika tampilan yang dilompati berulang kali adalah tampilan terakhir. |
bergerak | Diaktifkan saat tampilan bergerak |
di Ketuk | Dipicu ketika setiap item diklik |