1.输入框为空时弹出提示:
submi(e){
if (this.name=='') {
//uni-app官网-API-界面-交互反馈-uni.showToast
uni.showToast({
//title-提示内容
title: '请输入用户名',
//duration-提示的延迟时间
duration: 1000,
})
return ;
}
}
2.文字居中:
设置inline-height与height相等,添加**text-align:center;**属性
3.列表切换,数目少时直接写死
<view class="flex" >
<!-- 菜单少直接写死,用class判断条件,将0或1传值; -->
<view class="flex-sub padding-sm margin-xs radius"
v-bind:class="TabCur==0? 'bgcolor' : 'bg' " @click="getItem(0)">通知公告</view>
<view class="flex-sub padding-sm margin-xs radius"
v-bind:class="TabCur==1? 'bgcolor' : 'bg' " @click="getItem(1)">新闻动态</view>
</view>
在data数据中声明变量TabCur:0,定义一个空数组list[ ],未调取接口时手动分类;
//接口传回直接分类好的,此处直接手动分类
方法代码:
getItem(index){
// 点击哪个切换哪个
console.log(index)
this.TabCur =index;
// 判断点击的是什么,将值传回空数组
if(this.TabCur==0){
this.list=[];
// 使用concat方法进行数组拼接
this.list = this.list.concat(this.list1);
}
if(this.TabCur==1){
this.list=[];
this.list = this.list.concat(this.list2);
}
}
4.点击按钮向数组中添加一组新数据
<view class="menu padding-md margin-left">
<view class="margin-right" v-for="(site,index) in buttons" @click="DateChange(site,index)" >
<view class="img" style="margin-left: 7px;">
<image v-bind:src="site.img" mode="" style="width: 100%;height: 100%;"></image>
</view>
<view class="title" style="margin-top: 5px;">{{site.name}}
</view>
</view>
</view>
数组:
buttons:[
{img:'../../static/baoxiu.png',name:"报修系统"},
{img:'../../static/xinzeng.png',name:"投诉系统" },
{img:'../../static/xunjian.png',name:"巡检系统"},
{img:'../../static/shebei.png',name:"设备管理" },
{img:'../../static/shanghu.png',name:"商户服务" },
]
方法:
DateChange:function(site,index){
// 添加一组新数据
console.log(site)
this.buttons.push({
img:'../../static/chuli.png',
name:"设备管理",
})
// 数据集合
var userName = [];
this.buttons.forEach(function(v){
userName.push(v.name);
});
console.log(userName);
}
5.表单中 v-bind:disabled="flag"动态绑定属性值,正常情况下disabled="true"表示禁用表单输入域,增加时允许输入,修改时不允许输入;
<div class="book">
<label for="id">编号</label>
<input type="text" id="id" v-model="id" v-bind:disabled="flag"/>
<label for="name">名称</label>
<input type="text" id="name" v-model="name" />
<button @click="handle">提交</button>
</div>
6.以整张图片为背景图
根据不同需求设置不同属性;
body{
background-image: url(./img/1.jpg);
background-repeat: no-repeat;
/* 1.背景图像将缩放,并尝试匹配内容区域。不过图像将保持其长宽比; */
/* background-size: contain; */
/* 2.背景图像将拉伸以覆盖整个内容区域 */
/* background-size: 100% 100%; */
/* 3.背景图像将缩放以覆盖整个内容区域,"cover" 值保持长宽比,且可能会裁剪背景图像的某部分: */
background-size: cover;
}