uniapp前端知识笔记持续更新

一、uniapp前端实现单选功能

方法一、使用radio组件

1.布局部分

image.png

@change = "radioChange()" 可以不要，还没写方法

                覆膜费用
                
                    哑膜
                    亮膜
                    不覆膜
                
            

2.js部分

（1）data(）里给变量赋值 methods方法防止点击事件并赋值

data() {
            return {
                curr:2
            }
        },
methods: {
            changeradioA:function(){
                this.curr =1;
            },
            changeradioB:function(){
                this.curr =2;
            },
            changeradioC:function(){
                this.curr =3;
            }
        }

3.效果展示

1.布局部分 不用js部分

image.png

方法二、使用radio-group组件

                覆膜费用
                
                    
                        哑膜
                        亮膜
                        不覆膜
                    
                
            

2.效果展示

image.png

二、页面公共配置navigationStyle为custom（禁用），移动端不显示顶部页面标题解决办法
1、pages.json里globalStyle中若
页面公共配置navigationStyle为custom（禁用），即时单个页面样式配置有"navigationBarTitleText": "页面名称",可能会出现移动端不显示顶部页面标题。
在每个页面钟加入app-plus如下即可:

"app-plus":{
    "titleNView":{                  
        "titleText":"计价明细"
    }   
}

2、效果

image.png

三、常用3种页面跳转方式
第1种、flex布局中view标签中直接设置

image.png

第2种、button按钮跳转

image.png

image.png

第3种、默认导航的跳转方式
（1）默认导航样式，实现跳转

image.png

image.png

（2）设置点击调试
onNavigationBarButtonTap 为系统默认导航的跳转方法

image.png

查看获取的信息

image.png

（3）设置点击事件

效果展示，跳转完成

111.gif

四、页面切换动画
第一种、组件方式animationType
（1）可以在pages.json 中配置的是窗口显示的动画

"style": {
    "app-plus": {
        "animationType": "fade-in",
        "animationDuration": 300
    }
}

（2）也可以在view标签中设置动画

image.png

（3）动画的参数、效果参数

image.png

第二种 组件方式

image.png

设置为从底部进入

222.gif

五、检查是否登录，未登录进入登录页面，登录进入index页面
1、pages.json启动页设置为index页面未启动页面

image.png

[图片上传中...(image.png-a68ac-1582738947959-0)]

2、index页面添加判断方法

image.png

onLoad() {
            var login = uni.getStorageSync("token");
            if(!login){
                uni.navigateTo({
                    url:"../login/login"
                })
            }
        },

3、login页面添加登录时间，给一个token，以免检查不到token总是弹回登录页面

image.png

methods: {
            dologin:function(){
                uni.setStorageSync('token','123456');
                uni.navigateTo({
                    url:"../index/index"
                })
            }
        }