码迷,mamicode.com
首页 > 其他好文 > 详细

前端--小程序的学习(二)

时间:2018-06-25 14:56:59      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:范围   指正   checkbox   判断   分享   按钮   循环   load   picker   

今天呢,我们一起来看看小程序的wxml,其实呢就跟前端写html一样的,只不过这里标签不一样,并且头部head部分也不用写,因为小程序内在都包好了。

wxml基本由这几个标签

技术分享图片

数据绑定类似于Vue的数据绑定(“{{value}} ”绑定数据),数据初始化时在js文件的Page()函数里的data对象中。
以下是常用的标签:
view标签:视图标签,默认换行,类似于div标签,块级元素;
icon标签:展示图标 type属性用于展示什么样的图标如:clear,success,info,warn等,size:图标大小;
button标签:size:按钮大小(只有俩个值:mini,default),type:类型(改变颜色,default,warn,primary),plain:是否镂空,背景透明(true/false), loading(名称前是否带下载图标),form-type:用作表单按钮(submit/reset),hover-class(点击下去的样式类, 目前在无type属性并且plain为false时才能生效 );
input: 输入框 type表示类型,里面没有password,password单独作为属性表示输入密码 auto-focus:自动聚焦  placeholder-class:指定占位符的样式类;
checkbox:最外围是checkbox-group 内部包含checkbox,可以添加checked来默认选中,color用于改变对勾的颜色,checkbox-group可以绑定bindchange事件;
Picker(选择器):mode属性用来控制选择器类别(selector 普通选择器,time 时间选择器,date 日期选择器) value:当前选择的值,range:变化范围,对于time选择器和date选择器需要设定start和end属性来确定起止范围(不能设定range)改变选择器的值需要绑定变化函数(bindchange)
text:行及元素。
以下是例子:
基本的数据绑定
技术分享图片

列表渲染、循环

技术分享图片技术分享图片技术分享图片

条件判断

技术分享图片技术分享图片

创建模板的wxml

技术分享图片技术分享图片

绑定事件

技术分享图片

其实,只写wxml的话,就是讲数据放在view里面,再结合css就可以做和传统的web前端做一样的界面了

以上均为个人观点,欢迎指正O(∩_∩)O

前端--小程序的学习(二)

标签:范围   指正   checkbox   判断   分享   按钮   循环   load   picker   

原文地址:https://www.cnblogs.com/shirley-csdn/p/miniPro-3.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!