wxp-ui / Wxp Ui
Licence: mit
小程序插件合集(下拉刷新, 拖拽排序, 索引列表, 日期选择, 侧滑删除...)
Stars: ✭ 636
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Wxp Ui
Dragscroll
micro library for drag-n-drop scrolling style
Stars: ✭ 989 (+55.5%)
Mutual labels: drag, scroll
React Use Gesture
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
Stars: ✭ 5,704 (+796.86%)
Mutual labels: drag, scroll
use-gesture
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
Stars: ✭ 6,624 (+941.51%)
Mutual labels: drag, scroll
Scrollbooster
Enjoyable content drag-to-scroll library
Stars: ✭ 775 (+21.86%)
Mutual labels: drag, scroll
React Indiana Drag Scroll
React component which implements scrolling via holding the mouse button or touch
Stars: ✭ 190 (-70.13%)
Mutual labels: drag, scroll
Kddraganddropcollectionview
This component allows for the transfer of data items between collection views through drag and drop
Stars: ✭ 476 (-25.16%)
Mutual labels: drag
Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Stars: ✭ 23,641 (+3617.14%)
Mutual labels: drag
Svelte Grid
A responsive, draggable and resizable grid layout, for Svelte.
Stars: ✭ 473 (-25.63%)
Mutual labels: drag
Tableviewdragger
A cells of UITableView can be rearranged by drag and drop.
Stars: ✭ 469 (-26.26%)
Mutual labels: drag
Jtsage Datebox
A multi-mode date and time picker for Bootstrap (3&4), jQueryMobile, Foundation, Bulma, FomanticUI, and UIKit (or others)
Stars: ✭ 481 (-24.37%)
Mutual labels: date-picker
React Beautiful Dnd
Beautiful and accessible drag and drop for lists with React
Stars: ✭ 25,810 (+3958.18%)
Mutual labels: drag
Nighttab
A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.
Stars: ✭ 598 (-5.97%)
Mutual labels: tab
React Scrollbars Custom
The best React custom scrollbars component
Stars: ✭ 576 (-9.43%)
Mutual labels: scroll
Recyclerview Fastscroller
A fully customizable Fast Scroller for the RecyclerView in Android, written in Kotlin
Stars: ✭ 585 (-8.02%)
Mutual labels: scroll
Dragdropswiperecyclerview
Kotlin Android library that extends RecyclerView to support gestures like drag & drop and swipe, among others. It works with vertical, horizontal and grid lists.
Stars: ✭ 469 (-26.26%)
Mutual labels: drag
Vue Draggable Resizable Gorkys
Vue 用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线
Stars: ✭ 521 (-18.08%)
Mutual labels: drag
WxP UI
WxP UI 是一款提供高交互小程序插件的合集, 致力于简洁和高可用性的插件实现.
说明
使用前请认真阅读文档和示例项目
该小程序所有组件都是基于微信小程序原生api编写的, 旨在提供最简明扼要的实现思路, 所以如果用了第三方框架会增加学习成本. 当然这也造成所有组件只有微信端实现的问题, 不过聪明的你看了这些实现后肯定可以举一反三, 实现其他端的展现.
线上演示
微信交流群
+微信 singletouch233 进群交流, 加的时候请备注: WxP UI. 您的 star 是我前进的动力~~.
Scss 转 Wxss 设置
Visual Studio Code
本项目默认包含.vscode 配置文件, 安装完插件即可使用
WebStorm
preferences -> file watchers -> + scss 文件 ->
将上图参数替换
-
Arguments
参数替换为--no-cache --update --style nested --sourcemap=none $FileName$:$FileNameWithoutExtension$.wxss
-
Output paths to refresh
参数替换为$FileNameWithoutExtension$.wxss
接着配置 Scope
即 File Watcher
在项目中作用域, 我们点击最外层文件夹然后选择 Include Recursively
即递归整个项目文件
完成之后 Apply
即可
组件列表
- swipe-list组件
- scroll组件
- tab组件
- drag组件
- x-drag组件
- date-picker组件
- side-slip组件(基于movable-view实现)
- index-list组件
如何使用
git clone https://github.com/singletouch/wx-plugin.git
将需要使用的组件代码拷至自己的小程序项目中,按照小程序官方引入组件方式引入即可
本项目自身就是一个完整的小程序项目,也可以直接使用本项目作为小程序开发目录
组件配置
Scroll 组件
Scroll Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
requesting | 列表数据是否处于加载中 | Boolean | -- | false |
end | 列表数据加载完成 | Boolean | -- | false |
emptyShow | 控制空状态显示 | Boolean | -- | false |
listCount | 当前列表长度 | Number | -- | 0 |
emptyUrl | 空列表的展示图片 | String | * | /assets/image/empty/empty.png |
emptyText | 空列表的文字提示 | String | * | 未找到数据 |
refreshSize | 下拉刷新的高度 | Number | -- | 90 |
topSize | 顶部高度 | Number | -- | 0 |
bottomSize | 底部高度 | Number | -- | 0 |
color | 颜色 | String | -- | "" |
enableBackToTop | 双击顶部状态栏回到顶部 | Boolean | -- | false |
Scroll Events
事件名称 | 说明 | 回调参数 |
---|---|---|
refresh | 下拉刷新 | -- |
more | 上拉加载 | -- |
Scroll Slots
name | 说明 |
---|---|
-- | 列表组件主体 |
Tab 组件
Tab Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
tabData | 数据源 | Array | -- | [] |
tabCur | 当前聚焦项索引 | Number | -- | 0 |
scroll | 是否可以超出滚动 | Boolean | -- | false |
size | tab高度 | Number | -- | 90 |
color | 颜色 | String | -- | "" |
Tab Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | tab切换事件 | 当前选中tab的index |
Tab Methods
方法名 | 说明 | 回调参数 |
---|---|---|
scrollByIndex | 让tab组件根据传入的index进行滚动 | 需要切换tab项的index |
DatePicker 组件
后续更新
SideSlip 组件
SideSlip Methods
方法名 | 说明 | 回调参数 |
---|---|---|
delete | 点击删除按钮触发的事件 | -- |
IndexList 组件
IndexList Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
listData | 数据源 | Array | -- | [] |
topSize | 顶部固定区域高度 | Number | -- | 0(rpx) |
bottomSize | 底部固定区域高度 | Number | -- | 0(rpx) |
color | 颜色 | String | -- | "" |
emptyUrl | 空列表的展示图片 | String | * | /assets/image/empty/empty.png |
emptyText | 空列表的文字提示 | String | * | 未找到数据 |
emptyShow | 控制空状态显示 | Boolean | -- | false |
listData Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
key | 索引值 | String | -- | -- |
data | 索引值对应数据 | Array | ... | ... |
数据结构演示, 如需更多数据结构和渲染样式, 需自行修改渲染和初始化部分代码.
[
{
key: "A",
data: [
{
name: "城市1",
code: "0001",
short: "city1"
},
{
name: "城市2",
code: "0002",
short: "city2"
},
...
]
},
{
key: "B",
data: [
{
name: "城市1",
code: "0001",
short: "city1"
},
{
name: "城市2",
code: "0002",
short: "city2"
},
...
]
},
{
key: "C",
data: [
{
name: "城市1",
code: "0001",
short: "city1"
},
{
name: "城市2",
code: "0002",
short: "city2"
},
...
]
}
...
]
IndexList Events
事件名称 | 说明 | 回调参数 |
---|---|---|
click | 点击item | 当前item的数据信息 |
Drag 组件
tip: 最新版本去除 dataChange
方法, 改为直接使用 this.drag.init()
, listData, columns, topSize, bottomSize
等参数变化时候需要手动初始化
Drag Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
extraNodes | 额外节点 | Array | -- | [] |
listData | 数据源 | Array | -- | [] |
columns | 列数 | Number | -- | 1 |
topSize | 顶部固定区域高度 | Number | -- | 0(rpx) |
bottomSize | 底部固定区域高度 | Number | -- | 0(rpx) |
itemHeight | 每个 item 高度(用于计算 item-wrap 高度) | Number | -- | 0(rpx) |
scrollTop | 页面滚动高度(用于页面滚动时候正确计算) | Number | -- | 0(rpx) |
Drag Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 排序监听事件 | 排序后数据 |
sortend | 排序结束事件 | 排序后数据 |
click | 点击item监听 | item数据和排序key值 |
listData Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
dragId | 每个数据项唯一标识(必填, 提升渲染性能) | String/Int | -- | -- |
fixed | 是否固定该项 | Boolean | -- | -- |
... | ... | ... | ... | ... |
extraNodes Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 额外节点类型 | String/Int | before/after/destBefore/destAfter | -- |
dragId | 每个数据项唯一标识(必填, 提升渲染性能) | String/Int | -- | -- |
destKey | 要插入的位置 | Number | -- | -- |
fixed | 额外节点是否固定 | Boolean | -- | -- |
slot | 额外节点展示的所使用的 slot 名称 | String | -- | -- |
贡献
如果有什么好的建议欢迎提issues
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].