UI设计

.wxml

一.视图容器

1.view

①属性

属性	类型	默认值	说明
hover	Boolean	false	是否单击态
hover-class	String	none	指定按下去的样式类
hover-start-time	Number	50ms	按住后多久出现单击态
hover-stay-time	Number	400ms	手指松开后单击态保留时间

2.scroll-view可滚动视图

滚动条

②属性

属性	类型	默认值	说明
scroll-x	boolean	false	允许横向滚动
scroll-y	boolean	false	允许纵向滚动
upper-threshold	number	50ms	距顶/左多远时触发事件
lower-threshold	number	50ms	距底/右多远时触发事件
scroll-top	number		设置竖向滚动条位置
scroll-left	number		设置横向滚动条位置
scorll-into-view	string		值应为某子元素id，则滚动到该元素，元素顶部对其滚动区域顶部
bindscrolltoupper	事件		滚动到顶/左边，触发事件
bindscrolltolower	事件		滚动到底/右边，触发事件
bindscroll	事件		滚动时触发

3.swiper滑块视图

切换显示内容，轮播和切换效果

海报轮播和页签轮换

①属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
autoplay	boolean	flase	是否自动切换轮播
current	number	0	当前所在页面的index
interval	number	5000	自动切换时间间隔
duration	number	500	滑动动画时长
circular	boolean	false	是否采用衔接滑动
bindchange	事件		current改变时会触发

4.movable-view可移动视图

页面中可以拖拽滑动

要先定义可移动区域movable-area，在定义直接子节点movable-view，否则不能移动

movable-area和movable-view必须设置width和height，默认10px

默认绝对定位，顶和左属性0px

①属性

属性	类型	默认值	说明
direction	string	none	movable-view的移动方向，属性值右all、vertical、horizontal、none
inertia	boolean	false	movable-view是否带有惯性
out-of-bounds	boolean	false	超过可移动区域后，movable-view是否还可以移动
x	number		定义x轴方向的偏移
y	number		y
damping	number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画
friction	number	2	摩擦系数，用于控制惯性滑动的动画
disabled	boolean		是否禁用
scale	boolean		是否支持双指缩放
scale-min	number		定义缩放倍数最小值
scale-max	number		定义缩放倍数最大值
scale-value	number		定义缩放倍数，0.5~10
bindchange	事件		拖动过程中触发的事件
bindscale	事件		缩放过程中触发的事件

5.cover-view覆盖原生组件视图

cover-view覆盖在原生组件上的文本视图

cover-image覆盖在原生组件上的图片视图

①属性

cover-view

属性	类型	默认值	说明
scroll-top	number/string		设置顶部滚动偏移量

cover-image

属性	类型	说明
src	string	路径
bindload	事件	图片加载成功触发
binderror	事件	失败

微信小程序学习笔记（二）UI设计相关推荐

微信小程序学习笔记(二)模板与配置
文章目录 1. WXML 模板语法 1.1 数据绑定 1.1.1 数据绑定的基本原则 1.1.2 在 data 中定义页面的数据 1.1.3 Mustache 语法的格式 1.1.4 Mustache ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
微信小程序学习笔记 ( 小程序主体学习二逻辑层 app.js 扩展高级食用方法)
目录结构上图是我建立的的微信小程序的目录结构主体学习逻辑层(App Service) 小程序开发框架的逻辑层由 JavaScript 编写. 逻辑层将数据进行处理后发送给视图层,同时接受视 ...
微信小程序学习笔记（二）-- 开发之框架
一.小程序框架介绍(了解) 小程序框架包含小程序的配置.框架接口.场景值.WXML 和 WXS 等二.小程序的配置(精通) 小程序的配置分为全局配置.页面配置以及sitemap 配置 1.全局配置 ...

微信小程序学习笔记（二）UI设计