uni-app学习笔记(1)
2019-03-11 本文已影响2人
半庭
导航栏
1.设置导航栏自定义样式(取消默认导航栏)
pages.json文件中设置
navigationStyle 只在 pages.json->globalStyle 中设置生效。开启 custom 后,所有窗口均无导航栏。
Button点击事件
template中加入
<button @click="clickTest" class="loginbtn">登陆</button>
script中加入
clickTest: function(e) {
if (this.login.uesrname.length > 0) {
if (this.login.password.length > 0) {
//网络请求
} else {
uni.showToast({
title: '密码不能为空',
icon: "none",
duration: 2000
});
}
} else {
uni.showToast({
title: '账户不能为空',
icon: "none",
duration: 2000
});
}
input监听事件
template中加入
<input @input="onKeyUserNameInput" v-model="login.uesrname" placeholder="请输入账号" />
script中加入
export default {
data() {
return {
login: {
uesrname: "",
password: "",
},
};
},
methods: {
onKeyUserNameInput: function(e) {
console.log(e);
this.login.uesrname = e.target.value
console.log(this.uesrname);
},
},
}
</script>
tabBar设置
在pages.json中的加入
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/tab/home/home",
"text": "首页",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
}, {
"pagePath": "pages/tab/fillin/fillin",
"text": "录入",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
}, {
"pagePath": "pages/tab/query/query",
"text": "报表",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
}, {
"pagePath": "pages/tab/person/person",
"text": "个人",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
}]
},
网络请求
uni.request({
url: 'http://xx.com/api/login', //仅为示例,并非真实接口地址。
data: {
username: this.login.uesrname,
password: this.login.password
},
header: {
//'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
if (res.data.code == 0) {
uni.switchTab({
url: '../tab/home/home'
});
} else {
uni.showToast({
title: '账户出错',
icon: "none",
duration: 2000
});
}
}
});