WxP UI

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

说明

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

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

线上演示

微信交流群

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

Scss 转 Wxss 设置

Visual Studio Code

Live Sass Compiler 插件

本项目默认包含.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

Scroll Events

Scroll Slots

Tab 组件

Tab Attributes

Tab Events

Tab Methods

DatePicker 组件

后续更新

SideSlip 组件

SideSlip Methods

IndexList 组件

IndexList Attributes

listData Attributes

数据结构演示, 如需更多数据结构和渲染样式, 需自行修改渲染和初始化部分代码.

[
    {
        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

Drag 组件

tip: 最新版本去除 dataChange 方法, 改为直接使用 this.drag.init(), listData, columns, topSize, bottomSize 等参数变化时候需要手动初始化

Drag Attributes

Drag Events

listData Attributes

beforeExtraNodes && afterExtraNodes Attributes

贡献

如果有什么好的建议欢迎提issues

License

MIT