uni-app学习笔记(1)

导航栏

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
                                    });
                                }
                            }
                        });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,262评论 4 61
  • github排名https://github.com/trending,github搜索:https://gith...
    小米君的demo阅读 4,844评论 2 38
  • 我叫帅哥 人如其名 听说当时给我接生的医生 都被我的惊世容颜闪瞎了眼 我的父母为了不引起社会恐慌 给我准备了一层面...
    南斯拉夫大菠萝阅读 1,092评论 0 0
  • 微信读书不错,可以把碎片时间都用上,还能语音朗读,洗洗涮涮的时候就把梦枕貘的妖猫传四部都看完了。对妖猫传的兴趣,还...
    秋天的山荆子阅读 308评论 0 0
  • 生命奄奄一息的时候 就像在黑夜中穿行 打着灯还是看不见 一片空洞的漩涡 我们安慰自己很久很久 呼喊肯定被夜风吃掉了...
    桜里予阅读 300评论 0 5