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

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

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

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

Live Sass Compiler 插件

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

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

使用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

将需要使用的组件代码拷至自己的小程序项目中，按照小程序官方引入组件方式引入即可

本项目自身就是一个完整的小程序项目，也可以直接使用本项目作为小程序开发目录

后续更新

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

[
    {
        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"
            },
            ...
        ]
    }
    ...
]

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

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

MIT