微信小程序_基础组件学习02

swiper组件

swiper是滑块容器，也就是手机端的轮播图。

swiper组件有两部分组成swiper和swiper-item。

swiper-item需要放在swiper这个容器里面。

<swiper><swiper-item class="bannerItem"></swiper-item><swiper-item class="bannerItem"></swiper-item>
</swiper>

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	否

indicator-dots 用于开启指定点（轮播图必备）

indicator-color用于指示点的颜色，一般设置为rgba(0,0,0,.5)

circular 开启后，当当前在最后一张时，向后滑动会来到第一张。

button组件

只要谈到表单就离不开的按钮组件。

属性	类型	默认值	必填	说明
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标
form-type	string		否	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
open-type	string		否	微信开放能力

特别提醒：微信小程序里的button是块级标签，也就是说当只有一个button时候，它会独占一行。

<button type="primary">按钮</button>

type的主要值

值	说明
primary	绿色
default	白色
warn	红色

radio-group和radio组件

单选组件, 只能选择radio-group中的一个。

<radio-group><radio value="0">男</radio><radio value="1">女</radio>
</radio-group>

check-group和checkbox组件

复选组件，可以选择多个。

<view>爱好:<checkbox-group><checkbox value="0">篮球</checkbox><checkbox value="1">足球</checkbox><checkbox value="2">羽毛球</checkbox></checkbox-group>
</view>

input组件

input组件作为输入框，form表单中不可或缺的重要元素。

属性	类型	默认值	必填	说明
value	string		是	输入框的初始内容
type	string	text	否	input 的类型
password	boolean	false	否	是否是密码类型
placeholder	string		是	输入框为空时占位符
placeholder-style	string		是	指定 placeholder 的样式
placeholder-class	string	input-placeholder	否	指定 placeholder 的样式类
disabled	boolean	false	否	是否禁用
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度

input表单有一个缺点，那就是它默认没有外边框。得通过自己写css来添加外边框。

<form action="#"><input class="viewIpt" placeholder="请输入用户名" /><input class="viewIpt" placeholder="请输入密码" password="true"/>
</form>

.viewIpt{border: 1px solid black;border-radius: 4px;margin: 8px;padding: 4px;
}

switch组件

switch组件就是滑块，自带很漂亮的动画。

progress组件

属性	类型	默认值	必填	说明
percent	number		否	百分比0~100
show-info	boolean	false	否	在进度条右侧显示百分比
border-radius	number/string	0	否	圆角大小
font-size	number/string	16	否	右侧百分比字体大小
stroke-width	number/string	6	否	进度条线的宽度
color	string	#09BB07	否	进度条颜色（请使用activeColor）
activeColor	string	#09BB07	否	已选择的进度条的颜色

进度条，这种东西可以大大提高用户的使用体验。

<view><progress percent="100" active="true" show-info="true" border-radius="10"></progress>
</view>

微信小程序_基础组件学习02相关推荐

微信小程序_简单组件使用与数据绑定
简单的数据传值官方文档:传送门点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息程序结构 Page({//页面的 ...
微信小程序_自定义组件_初体验
自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段个人认为,自定义组件是区分菜鸟与高手的分水岭第一篇先介绍小程序自定义组件的基本使用自定义组件的使用可以分为如下几个步骤创建组件 ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
微信小程序_笔记_04_Request请求_提交审核与发布
微信小程序3天课程学习的第2天笔记浏览器的生命周期函数: jQuery的$(document).ready(function(){})将会先一步执行 window.onload = function ...
微信小程序_小程序开发框架
微信小程序_小程序开发框架微信小程序框架微信小程序小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXS ...
知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
微信小程序 F2 图表组件
@antv/f2-canvas 微信小程序 F2 图表组件安装 npm i @antv/f2-canvas 快速开始下面我们就开始使用 f2-canvas 组件来绘制图表吧,这里假设用户已经初步了 ...

微信小程序_基础组件学习02

微信小程序_基础组件学习02

swiper组件

button组件

radio-group和radio组件

check-group和checkbox组件

input组件

switch组件

progress组件

微信小程序_基础组件学习02相关推荐

最新文章

热门文章