uni-app学习笔记(1)

作者: 半庭 | 来源:发表于2019-03-11 19:28 被阅读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
                                    });
                                }
                            }
                        });

相关文章

  • uni-app学习笔记(1)

    导航栏 1.设置导航栏自定义样式(取消默认导航栏)pages.json文件中设置 Button点击事件 templ...

  • uni-app入门详解

    1 uni-app学习 1.1 什么是uni-app uni-app是一个使用Vue.js语法来开发所有前端应用的...

  • Uni-App学习路线

    Uni-App学习路线 学习Uni-app用到的技术 Uni-app官网[https://uniapp.dclou...

  • uni-app 之登录页面

    学习了一周多uni-app,上一周主要是开发原生插件给uni-app调用。本周开始学习怎么使用uni-app写页面...

  • Uni-app 学习笔记

    uni-app跨平台框架官方教程 链接:https://ke.qq.com/course/343370 一、框架简...

  • uni-app学习笔记

    创建、运行、打包等相关流程。 目录结构: common,存放公用资源。 components,uni-app组件目...

  • 在uni-app框架中使用rem(h5和微信小程序)

    将在学习uni-app过程中遇到的问题记录一下: 1.rem根元素字号适配 问题uni-app中可以使用rem。r...

  • uni-app 介绍

    uni-app 介绍 1、什么是uni-app? uni-app是一个使用 Vue.js 开发所有前端应用的框架,...

  • uni-app学习笔记(4)

    自定义导航栏组件 首先我们需要在项目文件夹中的components中新建我们的组件文件nav-bar.vue 在页...

  • uni-app 学习笔记 三

    uni-app的网络请求 在官方文档上网络这一块总共介绍了四项:发起请求,上传下载,WebSocket,Socke...

网友评论

    本文标题:uni-app学习笔记(1)

    本文链接:https://www.haomeiwen.com/subject/ovybpqtx.html