uni-swiper-list
Recently, I was using UNI-App to develop a small program, but I couldn’t find a good TAB + Swiper to realize the functions similar to news, so I just used WxP UI to make a UNIApp version.
Uni-swipe -list, with native swiper to achieve left and right sliding, movable-area to achieve drop-down loading, currently only support small program implementation; Thanks to the WxP UI for the native applet version, now available as a uni-App plug-in.
Component list
- Swipe – list component
- TAB components
- Sroll components
How to use
git clone https://github.com/peng20017/uni-swiper-list.git
Copy the code
Directly into the HBuilder X -> Run -> wechat applets
This project itself is a complete UNI-APP project, app is not supported at the moment
Component configuration
Scroll components
Scroll Attributes
parameter | instructions | type | An optional value | The default value |
---|---|---|---|---|
requesting | Whether the list data is being loaded | Boolean | — | false |
end | The list data is loaded successfully | Boolean | — | false |
emptyShow | Control the empty state display | Boolean | — | false |
listCount | Current list length | Number | — | 0 |
emptyUrl | Display image of empty list | String | * | /assets/image/empty/empty.png |
emptyText | Text prompt for an empty list | String | * | No data found |
hasTop | Is there a header | Boolean | — | false |
refreshSize | Drop down the height of the refresh | Number | — | 90 |
bottomSize | At the bottom of the highly | Number | — | 0 |
color | color | String | — | “” |
enableBackToTop | Double click on the top status bar to return to the top | Boolean | — | false |
Scroll Events
The name of the event | instructions | The callback parameter |
---|---|---|
refresh | The drop-down refresh | — |
more | Pull on loading | — |
Scroll Slots
name | instructions |
---|---|
— | List component body |
Tab components
Tab Attributes
parameter | instructions | type | An optional value | The default value |
---|---|---|---|---|
tabData | The data source | Array | — | [] |
tabCur | Index of the current focus item | Number | — | 0 |
scroll | Whether you can go beyond scrolling | Boolean | — | false |
size | Height of the TAB | Number | — | 90 |
color | color | String | — | “” |
Tab Events
The name of the event | instructions | The callback parameter |
---|---|---|
change | TAB Switching Event | The index of TAB is currently selected |
Tab Methods
The method name | instructions | The callback parameter |
---|---|---|
scrollByIndex | Let the TAB component scroll according to the index passed in | You need to switch the index of the TAB entry |
contribution
If you have any good suggestions, please mention issues