logo

Free UI

轻量简洁的微信原生开发UI组件库

简介

Free UI,是一款微信原生开发的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水

如果你喜欢,请给个star呗~

个人说明

如有问题,请联系QQ664423077或公众号留言搞文艺的猿

预览

您可以通过微信扫码,查看最佳的演示效果。

源码地址

github地址: https://github.com/awzks1314/Free-UI

gitee地址:https://gitee.com/zkszz/free-ui

开始使用

  1. app.wxss引入基础样式,路径为/static/style
@import '/static/style/main.wxss';
  1. 按需引入需要的组件,组件都放在components
/* 比如app.json我引用了部分组件,全局使用*/
"usingComponents": {
    "free-tabs": "/components/module/free-tabs/free-tabs",
    "free-tag": "/components/basic/free-tag/free-tag",
    "free-navBar": "/components/module/free-navBar/free-navBar",
    "free-icon": "/components/basic/free-icon/free-icon",
    "free-title": "/components/basic/free-title/free-title",
    "free-subsection": "/components/module/free-subsection/free-subsection",
    "free-gap": "/components/module/free-gap/free-gap",
    "free-list": "/components/module/free-list/free-list",
    "free-image": "/components/basic/free-image/free-image"
  },
  1. 部分使用,在需要使用的backTop.json里引用
/* /pages/module/backTop/backTop.json */
{
  "navigationBarTitleText":"返回顶部",
  "usingComponents": {
    "free-backTop":"/components/module/free-backTop/free-backTop"
  }
}
  1. backTop.wxml使用
<!-- {{}}为参数配置-->
<free-backTop 
  scrollTop="{{scrollTop}}" 
  top="{{top}}"
  bottom="{{bottom}}"
  mode="{{mode}}"
  right="{{right}}"
  color="{{color}}"
  bgColor="{{bgColor}}"
  icon="{{icon}}"
  ></free-backTop>

版权说明

uView遵循MIT开源协议,意味着您无需支付任何费用,也无需授权,即可将uView应用到您的产品中。

最后修改:2021 年 05 月 27 日 01 : 42 PM
如果觉得我的文章对你有用,请随意赞赏