• WxP UI
• • 说明
  • 线上演示
  • 微信交流群
  • Visual Studio Code
  • • Scss 转 Wxss
  • WebStorm
  • • 代码提示
    • Scss 转 Wxss
  • 组件列表
  • 如何使用
  • 组件配置
  • • Scroll 组件
    • • Scroll Attributes
      • Scroll Events
      • Scroll Slots
    • Tab 组件
    • • Tab Attributes
      • Tab Events
      • Tab Methods
    • DatePicker 组件
    • SideSlip 组件
    • • SideSlip Methods
    • IndexList 组件
    • • IndexList Attributes
      • listData Attributes
      • IndexList Events
    • Drag 组件
    • • Drag Attributes
      • Drag Events
      • listData Attributes
      • extraNodes Attributes
  • 贡献
  • License

WxP UI

WxP UI 是一款提供高交互小程序插件的合集, 致力于简洁和高可用性的插件实现.

说明

使用前请认真阅读文档和示例项目

该小程序所有组件都是基于微信小程序原生api编写的, 旨在提供最简明扼要的实现思路, 所以如果用了第三方框架会增加学习成本. 当然这也造成所有组件只有微信端实现的问题, 不过聪明的你看了这些实现后肯定可以举一反三, 实现其他端的展现.

线上演示

微信交流群

+微信 singletouch233 进群交流, 加的时候请备注: WxP UI. 您的 star 是我前进的动力～～.

Visual Studio Code

Scss 转 Wxss

Live Sass Compiler 插件

本项目默认包含.vscode 配置文件, 安装完插件即可使用

WebStorm

代码提示

1. Preferences -> Plugins -> 搜索 Wechat mini program support 插件
2. Preferences -> Languages & Frameworks -> JavaScript -> Libraries -> 启用wechat-mini-program-api

Scss 转 Wxss

使用npm全局安装sass工具

npm install sass -g

Preferences -> Tools -> File Watchers -> + scss 文件 ->

将上图参数替换

• Arguments 参数替换为 --update --no-source-map $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