微信小程序的语法学习(一)icon,text,button,input

本文详细介绍了UI设计中常用的icon、text、button及input组件的属性设置,包括icon的类型、大小、颜色,text的可选性、空格显示,button的样式、镂空效果、加载图标,以及input的占位符和密码输入特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.0 icon标签。

主要三个属性:

1.1 type:     icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear;

1.2 size:     icon的大小;

1.3 color:   icon的颜色,同css的color

<icon color="red" size="30px" type="success"></icon>
<icon size="30px" type="success"></icon>
<icon type="info"></icon>
<icon size="50" type="warn"></icon>
<icon type="cancel"></icon>

2.0 text标签

2.1   selectable:     文本是否可选

2.2  space: 显示连续空格

3.2 decode:是否解码

<text>hellow world</text>
<!--加换行符会换行-->
<text>hellow world\n</text>
<text>hellow world</text>

3.0 button

3.1 type:按钮的样式类型,primary,default,warn
3.2 plain:按钮是否镂空,背景色透明

3.3 loading:名称前是否带 loading 图标

<button type="default">按钮</button>
<button type="primary">主要按钮</button>
<!--loading -->
<button type="warn" loading="{{true}}">否定按钮</button>
<!--plain 镂空-->
<button type="primary" plain="{{true}}">按钮</button>

4.0 input

<input placeholder="hello world"> 123 </input>
<input value="select"> 123 </input>
<input password> 123 </input>

微信小程序采用的是基于 JavaScript 的语法,下面是个简单的登录首页的代码示例: ``` // pages/index/index.js Page({ data: { userName: '', password: '', isLogin: false }, onLoad: function() { // 判断是否已经登录 if (wx.getStorageSync('userInfo')) { this.setData({ isLogin: true }) } }, bindUserNameInput: function(e) { this.setData({ userName: e.detail.value }) }, bindPasswordInput: function(e) { this.setData({ password: e.detail.value }) }, login: function() { if (this.data.userName === '' || this.data.password === '') { wx.showToast({ title: '用户名或密码不能为空', icon: 'none' }) } else { wx.setStorageSync('userInfo', { userName: this.data.userName, password: this.data.password }) this.setData({ isLogin: true }) wx.showToast({ title: '登录成功', icon: 'success' }) } } }) // pages/index/index.wxml <view class="container"> <view class="form" wx:if="{{!isLogin}}"> <view class="form-item"> <input class="form-input" placeholder="请输入用户名" bindinput="bindUserNameInput" /> </view> <view class="form-item"> <input class="form-input" placeholder="请输入密码" password="true" bindinput="bindPasswordInput" /> </view> <button class="form-button" bindtap="login">登录</button> </view> <view class="welcome" wx:if="{{isLogin}}"> <text>欢迎你,{{userName}}</text> </view> </view> // pages/index/index.wxss .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .form { display: flex; flex-direction: column; align-items: center; width: 80%; } .form-item { margin-bottom: 20rpx; } .form-input { height: 40rpx; padding
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值