uniapp前端知识笔记持续更新

一、uniapp前端实现单选功能

方法一、使用radio组件

1.布局部分

image.png

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

<view class="uni-form-item uni-row">
                <view class="title">覆膜费用</view>
                <view>
                    <label class="radio" @click="changeradioA"><radio value="r1" :checked="1==curr" color="#09BB07" />哑膜</label>
                    <label class="radio" @click="changeradioB"><radio value="r2" :checked="2==curr" color="#09BB07" />亮膜</label>
                    <label class="radio"><radio value="r3" :checked="3==curr" color="#09BB07" />不覆膜</label>
                </view>
            </view>

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组件

<view class="uni-form-item uni-row">
                <view class="title">覆膜费用</view>
                <view>
                    <radio-group>
                        <label class="radio"><radio value="r1" checked="true" color="#09BB07" />哑膜</label>
                        <label class="radio"><radio value="r2" color="#09BB07" />亮膜</label>
                        <label class="radio"><radio value="r3" color="#09BB07" />不覆膜</label>
                    </radio-group>
                </view>
            </view>

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

<script>
    export default {
        data() {
            return {    
            }
        },
        methods: {
            dologin:function(){
                uni.navigateTo({
                    url:"../index/index"
                })
            }
        }
    }
</script>

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

image.png
image.png

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

image.png
查看获取的信息
image.png
（3）设置点击事件

<script>
    export default {
        data() {
            return {    
            };
        },
        onNavigationBarButtonTap(e){
            // console.log("监听到原生标题栏按钮点击事件");
            // console.log(e);
            if(e.index == 0){
                uni.navigateTo({
                    url:"../yiju/yiju"
                })
            }
        }
    }
</script>

效果展示，跳转完成

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"
                })
            }
        }