view组件
view官方文档叫它组件,但是我喜欢叫它标签。
他的特点是在没有像弹性盒模型,浮动这样布局影响下,它很很霸道的在页面中独占一行。
官方文档说它有下面这几个属性,看你们喜欢着用吧(我表示没有到一个)
其实这个标签没什么好讲的,主要就是这几个属性稍微有点冷门了。没细心看文档表示不知道有这几个属性。
在我们的开发中,经常会要求我们加各种交互效果,一般的就是那种点击颜色要有点变化,让用户操作起来不那么生硬,感觉柔滑一点。这虽然是产品应该考虑的,但是想要成为一名优秀的前端程序员,我们也应该在开发的过程中,考虑当用户操作,这样你做出来的产品才会更有感情(其实就是不想写完以后,被产品经理各种改)
来看个小demo,我们来初步了解这个属性(下面是html和css)
未阻断点击态
阻断点击态
按住1000毫秒才触发点击态
松开后1000毫秒点击态消失
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.bg_ccc {
background-color: #ccc;
}
.p_40 {
padding: 40rpx;
}
.mt40 {
margin-top: 40rpx;
}
text组件
这个组件比较随和,不独占一行;但是也和固执,就是你设置宽高就是不理你,按自己的来。这个时候你如果想要强行改变它,那你可以用display改变他为块元素或者行内块元素以后,就可以修改它的宽高了。
官方文档里面说它有下面几个属性:
文本不可选
文本可选(长按可以选择)
啦啦 啦啦 中文空格一半的大小
啦啦 啦啦 中文空格大小
啦啦 啦啦 跟随字体
啦啦 < > & ' 啦啦
啦啦 < > & ' 啦啦
.mr_40 {
margin-right: 40rpx;
}
.fz_25 {
font-size: 50rpx;
}
image标签
这个标签是图片标签,我们在页面放图片的用到的标签,可以是远程图片,本地图片。
言归正传,我们看看官方给我的几个属性:
/* 图片标签样式 */
.b_333 {
margin-top: 20rpx;
border: 1rpx solid #333;
}
imageErr: function(e) { // 图片加载错误
console.log("图片加载错误")
console.log(e);
},
imageLoad: function(e) { // 图片加载完成
console.log("图片加载完成")
console.log(e);
}
小程序的button按钮也包含像view那几个点击态属性,但是微信默认有给button按钮默认的点击态,如果觉得不合适我们的项目场景,那么可以像view一样更改
button按钮属性有点多,就直接在代码里面注释了,我们要热爱看代码,那就看看代码吧。
/* button按钮 */
button {
margin-top: 40rpx;
}
showBtn: function() { // 判断是否禁用
wx.showToast({
title: '这个按钮弹框表示未禁用',
icon: "none"
})
},
resetPut: function(e) { // 重置表单
console.log("重置表单")
},
submitPut: function(e) { // 表单完成
console.log("点击表单完成");
},
getUserInfo:function(e) { // 得到用户信息
console.log("点击了获取用户信息");
console.log(e);
},
openContart: function(e) { // 客服消息点击卡片
console.log("点击打开客服");
console.log(e);
},
getPhone: function(e) { // 获取手机号回调
console.log("获取手机号");
console.log(e);
},
openAppErr: function(e) { // 打开app错误
console.log("打开app错误");
console.log(e);
},
openSeetting: function(e) { // 打开授权页回调
console.log("打开授权页回调");
console.log(e);
}
input组件
输入框这个组件的属性比较多,我们也就直接在示例中注释解释
/* input框样式 */
.input-placeholder {
color: blue;
}
.greenput {
color: green;
}
// input框
changeInput: function (e) { // 输入事件
console.log(e);
},
getFocus: function (e) { // 输入框聚焦事件
console.log(e);
},
loseFocus: function (e) { // 输入框失焦事件
console.log(e);
},
wancheng: function (e) { // 点击完成按钮事件
console.log(e);
}
navigator组件
导航组件,可以实现页面切换(路由),跳转到其他小程序等功能。
这个组件在这篇文章里面不会讲解得太详细,只讲路由的跳转,其他功能后面会有详细的讲解;我们还是老规矩,就在代码里面讲吧。
跳转
跳转
跳转
跳转
跳转