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