学习教程-小程序开发之基本组件的使用四

作者: 路羽

全网最全的网络资源分享网站

手机扫码查看

路羽资源网 每日一分享

在小程序前端开发中,会用到各种各样的组件,从几个基本的组件认识开始。

text组件
text组件是文本显示的组件。常用的属性有:

selectable:文本是否可选。如果selectable为true,代表文本可选(图二)。

学习教程-小程序开发之基本组件的使用四

图一

学习教程-小程序开发之基本组件的使用四

图二

decode:是否解码,true为解码,false为不解码,decode可以解析的 < > & '    


如果为fasle,>不会被解码

如果为true,>会被解码成>符号

space:代表空格的大小

学习教程-小程序开发之基本组件的使用四

学习教程-小程序开发之基本组件的使用四

当设置不同的space,空格的大小不一样

button组件
size:控制button大小

学习教程-小程序开发之基本组件的使用四

学习教程-小程序开发之基本组件的使用四

当size为mini时,显示小按钮

type:显示不同样式的button

学习教程-小程序开发之基本组件的使用四

学习教程-小程序开发之基本组件的使用四

plain和disable:设置plain按钮只显示边框,设置disable按钮不可点击。



laoding:按钮文字前是否有加载样式



hover-start-time和hover-stay-time:如果给按钮设置了按下去的样式,hover-start-time代表按下去 多久按钮会变成按下去的样式,hover-stay-time代表松开手指多久按钮会恢复原来的样子

<button hover-class="buttonpress" hover-start-time="1000" hover-stay-time="1000">按钮</button> 
.buttonpress{
  background: yellow;
}

open-type:微信开放能力

bindgetphonenumber:获取用户手机号回调,open- type=getPhoneNumber时有效

bindgetuserinfo:用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与 wx.getUserInfo返回的一致,open-type="getUserInfo"时有效

bindopensetting:在打开授权设置页后回调,open-type=openSetting时有效

<button size="mini" open-type="getPhoneNumber" bindgetphonenumber="bindgetphone">获取手机号</button>

 icon组件:
type:代表icon类型

<!--type icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear--->
<!--size icon的大小-->
<!--color icon的颜色,同css的color-->
<icon type="success" size="30" color="orange"/>
<view>
<icon type="success_no_circle"></icon>
</view>
<view>
<icon type="download" size="50"></icon>
</view>

progress组件
一般用于进度条的展示

<!--percent 百分比0~100-->
<!--show-info 在进度条右侧显示百分比-->
<!--font-size 右侧百分比字体大小-->
<progress percent="40" show-info="{{true}}" font-size="20"></progress>

<!--stroke-width  进度条线的宽度-->
<!--activeColor 已选择的进度条的颜色-->
<!--backgroundColor 未选择的进度条的颜色-->
<!-- border-radius 圆角大小-->
<!--active 为true 进度条会有动画-->
<!-- active-mode backwards: 动画从头播;forwards:动画从上次结束点接着播-->
<!--duration 进度增加1%所需毫秒数-->
<!--bindactiveend 动画完成事件-->
<progress class="progressSytle1" percent="40" stroke-width="10" activeColor="orange" backgroundColor="red"
      border-radius="40"
        active="{{true}}" active-mode="forwards" duration="100" bindactiveend="activeEnd"/>     

checkbox组件(多选框组件)
value:checkbox标识,选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value

disabled:是否禁用。

checked:是否选中。

color:checkbox选中的颜色。

<checkbox-group bindchange="cbchange">
  <checkbox value="中国">中国</checkbox>
  <checkbox value="美国" color="#1296db">美国</checkbox>
  <checkbox value="越南">越南</checkbox>
</checkbox-group>    

设置color后,选中的颜色变为蓝色

当checkbox-group绑定事件后,可以通过设置的value值得到当前checkbox的值:

  cbchange(res){
    console.log(res)
    var value = res.detail.value[0]
    wx.showToast({
      title: value,
    })
  },   

这样就可以把值获取到了。
分享到:
打赏
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽资源博客
原文地址: 《学习教程-小程序开发之基本组件的使用四》 发布于2020-6-3

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏