XView小程序开源组件库

2023-11-16

XView小程序组件库本着简单易用的原则封装组件,使用时只需要在json配置文件中引用即可

官方链接:https://xview.weapp.xwzj88.cn/

下载地址:https://github.com/xwzj12138/Xview

  • 基于微信小程序自定义组件封装
  • 核心功能组件化
  • 简化使用
  • 18个常用组件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用

到 GitHub 下载 xview 的代码,将 packages 目录拷贝到自己的项目中。然后按照如下的方式使用组件,以 Button 为例,其它组件在对应的文档页查看:
1,添加需要的组件。在页面的 json 中配置(路径根据自己项目位置配置):

{
  "usingComponents": {
    "x-button": "/packages/button/index"
  }
}

2,在 wxml 中使用组件

<view class='title'>行内按钮</view>
<view>
  <x-button bind:click="handleClick" inline>默认按钮</x-button>
  <x-button bind:click="handleClick" type="error" long="true" inline>联通两边按钮</x-button>
  <x-button bind:click="handleClick" type="primary" inline>Primary</x-button>
  <x-button bind:click="handleClick" type="ghost" inline>Ghost</x-button>
  <x-button bind:click="handleClick" type="info" inline>Info</x-button>
  <x-button bind:click="handleClick" type="success" inline>Success</x-button>
  <x-button bind:click="handleClick" type="warning" inline>Warning</x-button>
  <x-button bind:click="handleClick" type="error" inline>Error</x-button>
</view>

我们内置了所有组件的示例,您可以扫描下方的小程序码体验
在这里插入图片描述

组件库当中大致可分为一下三大类:

布局组件

内置常用的布局组件。如:grid九宫格,cell单元格,nav标签栏,drawer抽屉等,还有部分组件还在测试用,这里就不举例了。

  1. geid 九宫格
  2. cell单元格
  3. nav标签栏
  4. drawer标签栏
  5. 商品导航:这个组件还在测试期,相信用不了多久就可以与大家见面了

基础组件

  1. button 按钮
  2. icon 图标
  3. avatar 头像
  4. steps 步骤条
  5. search 搜索
  6. notice-bar 通知栏
  7. loading 底部加载提示
  8. progress 进度条
  9. count-down 倒计时

表单组件

  1. input输入框
  2. input-number数字输入框
  3. rate评分组件
  4. switch组件
  5. upload组件
  6. 还有一些组件在开发测试中
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

XView小程序开源组件库 的相关文章

  • 数据结构笔记:PR四叉树

    1 基本介绍 在PR四叉树中 每个节点代表一个矩形区域 并且每个节点要么没有子节点 要么有四个子节点 分别代表该矩形区域的四个象限 2 数据结构 PR四叉树的每个节点通常包含以下几个元素 区域 矩形 节点所代表的二维空间范围 点 存储在该区
  • 零售超市如何应对消费者需求?非常全面!

    随着科技的飞速发展和消费者期望的不断演变 零售行业正经历着一场深刻的革命 传统零售模式逐渐被新零售模式所取代 而其中一个备受关注的元素是自动售货机 自动售货机不仅在商场 车站和办公楼等高流量地点迅速扩张 还在重新定义我们如何购物 何时购物以
  • js数组转tree

    数组转 tree目前发现就三种方式 js版本实现了三种 初始化数据 let arr name 李四 id 2 pid 0 name 王五 id 3 pid 0 name 赵六 id 4 pid 3 name 吗六 id 9 pid 3 na
  • Latex编辑器Texstudio的快捷键汇总(更新)

    Latex编辑器Texstudio的注释快捷键 注释 Ctrl T 去除注释 Ctrl U

随机推荐

  • 语音识别之端点检测

    在之前呢我们已经把portaudio平台搭好了 可以采集声音信号并播放了 那么接下来呢我们就来做一些实质性的东西 自适应端点检测 那么什么是自适应端点检测呢 也就是采集声音信号的时候 开始说话到说话结束 我们把这一段声音信号采集下来进行处理
  • Java服务端返回json

    1 pom xml文件导入jar包
  • c语言的指针,以及指针套指针

    1 对于指针的理解 在C语言中 指针是一种特殊的数据类型 它用于存储变量的内存地址 通过指针 可以直接访问和修改变量的值 而不需要知道变量的名称 下面是一个例子来理解指针的概念 include
  • 1、ZigBee 开发教程之基础篇—ZigBee简介和学习方法

    文章目录 1 前言 2 ZigBee 简介 3 ZigBee和IEEE 802 15 4 的关系 4 ZigBee 的特点 5 ZigBee 无线网络通信信道分析 6 ZigBee的网络拓扑模型 7 ZigBee的应用范围 8 本人所使用的
  • 微信消息实现自动推送--方式一 成功啦 进来学

    前言 第一次来的小伙伴 请先看手动版教程 链接如下 直接点击 微信消息推送 超详细版 进来学 接下来 向大家说明一下 微信消息实现自动推送的方式有好几种 今天分享的是通过windows系统中的计划任务管理添加任务进行实现 也是比较简单的一种
  • Python-字典:键值对的魔法世界

    深入理解Python字典 键值对的魔法世界 在Python中 字典 Dictionary 是一种强大且常用的数据结构 它允许我们存储和组织键值对 Key Value 数据 与列表和元组不同 字典中的数据是无序的 但每个数据都与一个唯一的键相
  • Sentinel 流量控制

    上篇 Nacos 配置中心 目录 Sentinel 介绍 官方介绍 https sentinelguard io zh cn docs introduction html Sentinel 部署 服务改造 Sentinel 关键概念 流控规
  • Java 父类 xx = new 子类()

    在java中我们经常遇到父类 xx new 子类 的定义对象 那么与子类 xx new 子类 相比有什么区别呢 下面我们从代码分析 package com sky java public class FatherNewSon param a
  • Rust-Rocket框架笔记

    Rust Rocket框架笔记 Rocket Learn doc Rocket Addr 视频地址 What is Rocket QuickStart 下载Rocket Rust 运行Rust Rocket Hello 错误 端口占用 解决
  • linux下的信号是怎么回事

    信号的产生 Linux下信号这个概念可以来说是非常重要的 先来说下如何产生信号 然后在逐一解释 键盘组合键 硬件异常错误 通过一些指令 软件条件 调用系统函数 1 键盘组合键这个很好理解 下面以一个简单的实例来说明 include
  • 淘宝的架构师,曾宪杰先生主讲的淘宝网架构分享总结【淘宝目前的架构方向】...

    关于什么是stateless的扫盲 见这个贴 http kyfxbl iteye com blog 1831869 一般有一个共识 就是把应用做成无状态的 会比较容易实现水平伸缩 但是以前一直有一个想法 就算应用是有状态的 也可以做成水平伸
  • InputStream 、 InputStreamReader 、 BufferedReader区别

    区别介绍 1 InputStream OutputStream 处理字节流的抽象类 InputStream 是字节输入流的所有类的超类 一般我们使用它的子类 如FileInputStream等 OutputStream是字节输出流的所有类的
  • 云计算的三种模式IaaS/PaaS/SaaS/BaaS对比:SaaS架构设计分析

    SaaS 软件即服务 Software as a Service 的出现改变了传统使用软件转变为使用服务 SaaS与传统软件的最大区别是 前者按年付费租用服务 后者一次买断 这貌似只是 报价方式 的区别 实际上这是一个根本性的变化 这带来的
  • Pygame - 背景图片连续滚动

    方法 让背景图像分别在 0 0 和 0 img heigh 两个位置向下移动它们 当其中一个位于 0 img heigth 位置时 再次将其放置在 0 img heigh 位置 具体代码 import pygame import sys i
  • vue跳转微信小程序遇到的坑

    官方参考https developers weixin qq com doc offiaccount OA Web Apps Wechat Open Tag html 21 vue项目 h5跳转小程序 简书 遇到的问题 在PC端不显示样式
  • 力扣(LeetCode)算法_C++——最大连续 1 的个数 III

    给定一个二进制数组 nums 和一个整数 k 如果可以翻转最多 k 个 0 则返回 数组中连续 1 的最大个数 示例 1 输入 nums 1 1 1 0 0 0 1 1 1 1 0 K 2 输出 6 解释 1 1 1 0 0 1 1 1 1
  • PSA wiring diagram for jumper/relay 2.2hdi

    Anyone has 2007 Citroen Relay 2 2 HDI 88 KW 4HU engine and need an engine and abs wiring diagrams ECU Vistion DCU 102 Ju
  • c#线程三

    1 单元模式和Windows Forms 单元模式线程是一个自动线程安全机制 非常贴近于COM Microsoft的遗留下的组件对象模型 尽管 NET最大地放弃摆脱了遗留下的模型 但很多时候它也会突然出现 这是因为有必要与旧的API 进行通
  • 使用FPGA进行加速运算

    注 本篇文章来源于知乎 为微软亚洲研究院李博杰的回答 详细链接在这儿 点击打开链接 在这篇文章中 作者从CPU GPU FPGA的架构出发 讨论了微软数据中心为什么使用FPGA而不选择GPU 该文章是我逐字搬运过来的 其目的是为后续我们公司
  • XView小程序开源组件库

    XView小程序开源组件库 XView小程序组件库本着简单易用的原则封装组件 使用时只需要在json配置文件中引用即可 使用 组件库当中大致可分为一下三大类 布局组件 基础组件 表单组件 XView小程序组件库本着简单易用的原则封装组件 使