Uni-app历程

1. uni-app 数据为空显隐

<span v-if="data”>{data.name}</span>
<span v-else>暂无数据</span>

2. 页面的滑动

https://www.cnblogs.com/chengmingxiaowu/p/10812008.html

<view class="relative" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
</view>

data() {
        return {
            flag: 0,
            text: '',
            lastX: 0,
            lastY: 0
        }
},
methods: {
        handletouchmove: function(event) {
            // console.log(event)
            if (this.flag !== 0) {
                return;
            }
            let currentX = event.touches[0].pageX;
            let currentY = event.touches[0].pageY;
            let tx = currentX - this.lastX;
            let ty = currentY - this.lastY;
            let text = '';
            this.mindex = -1;
            //左右方向滑动
            if (Math.abs(tx) > Math.abs(ty)) {
                if (tx < 0) {
                    text = '向左滑动';
                    this.flag = 1;
                //  this.getList();  //调用列表的方法
                } else if (tx > 0) {
                    text = '向右滑动';
                    this.flag = 2;
                }
            }
            //上下方向滑动
            else {
                if (ty < 0) {
                    text = '向上滑动';
                    this.flag = 3;
                //  this.getList();  //调用列表的方法
                } else if (ty > 0) {
                    text = '向下滑动';
                    this.flag = 4;
                }
            }
            //将当前坐标进行保存以进行下一次计算
            this.lastX = currentX;
            this.lastY = currentY;
            this.text = text;
        },
        handletouchstart: function(event) {
            // console.log(event)
            this.lastX = event.touches[0].pageX;
            this.lastY = event.touches[0].pageY;
        },
        handletouchend: function(event) {
            this.flag = 0;
            this.text = '没有滑动';
        },
}

3. 显示提示框

https://blog.csdn.net/zhuoganliwanjin/article/details/81872358

4. 获取设备基本配置

onLoad(e) {
        let that = this;
        uni.getSystemInfo({
            success(res){
                console.log(res)
                that.WinHeight = res.windowHeight;
            }
        })
    },

5. 页面刷新属性

page.json中为需要的页面开启下拉刷新

"enablePullDownRefresh": true

页面中，相当于onload（）方法，监测顶端下拉刷新，处理完数据，停止刷新

onPullDownRefresh(){
            console.log("顶部刷新");
            this.pageSize = 5;
            this.getAllEquipment(this.pageSize)   // 调配方法
            uni.stopPullDownRefresh();
        }

6. JavaScript Date

获取昨日，今日，明日

getNowFormatDate() {
            //昨天的时间
            var day1 = new Date();
            day1.setTime(day1.getTime()-24*60*60*1000);
            this.yesterday = day1.getFullYear()+ "-" + ((day1.getMonth()+1)<10?"0":"")+(day1.getMonth()+1)+ "-" +(day1.getDate()<10?"0":"")+(day1.getDate())
            //今天的时间
            var day2 = new Date();
            day2.setTime(day2.getTime());
            this.currentdate = day2.getFullYear()+ "-" + ((day2.getMonth()+1)<10?"0":"")+(day2.getMonth()+1)+ "-" +(day2.getDate()<10?"0":"")+(day2.getDate())
            //明天的时间
            var day3 = new Date();
            day3.setTime(day3.getTime()+24*60*60*1000);
            this.tomorrow = day3.getFullYear()+ "-" + ((day3.getMonth()+1)<10?"0":"")+(day3.getMonth()+1)+ "-" +(day3.getDate()<10?"0":"")+(day3.getDate())    
            }

7.Uni-app_uCharts

https://blog.csdn.net/weixin_42551781/article/details/98348357

8. Promise 解决异步操作

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

new Promise(function () {});

9. Uni-app 弹出层popup

<button type="button" @click="togglePopup('top')">顶部弹出 popup</button>
<uni-popup :show="type === 'top'" position="top" mode="fixed" msg="顶部弹出popup" @hidePopup="togglePopup('')" >
            aaa
</uni-popup>

10. uni-app 页面跳转

页面之间跳转+传值

uni.navigateTo({
    url:'../page/page1?index='+this.params
            // url:'页面?参数='+值
});

页面的获取参数值

onLoad: function(options){
            this.paramsName = options.index;
            console.log(this.paramsName);
        },

11. app顶部透明度的改变

page.json 页面中添加titleNView的类型即可

"style": {
                "app-plus": {
                    "bounce": "none",
                    "titleNView": {
                        "type": "transparent",
                k    }
                }
    }

12. 设置顶部title

let title = "Uni-app";
uni.setNavigationBarTitle({
                title
            })

13. 标题栏的点击效果

标题栏的内容写在page.json的情况下

// 获取标题栏的input
onNavigationBarSearchInputClicked:async function (){
    console.log("点击了输入框")
}
// 获取标题的按钮
onNavigationBarButtonTap(e){
    console.log(e);
    let index = e.index;
}

14. iconfont 的引用

www.iconfont.cn 官网创建账号，新建项目，下载至本地，将ttf放入到static 文件夹

在App.vue 中进行引入全局icon，直接在 app.vue 里面加入css的文件即可

在VUE中进行引用的时候

15. app顶部按钮

顶部按钮配置在page.json

onNavigationBarButtonTap(e) {
    // 根据e.index来判断是哪一个按钮，进行相应事件
    const index = e.index;
    if (index === 0) {
        this.$api.msg('点击返回按钮');
        uni.navigateBack({
               delta:1
        })
    } else if (index === 1) {
        console.log("点击改变地区按钮")
        this.$refs['region'].show()    // 底部多列选项卡显示
    }
}

16. 弹出键盘对页面的压缩

<view class="container" :style="'height:'+screenHeight+'px !important;'" >

@import "../../static/css/login.scss";
.container{
        width: 100%;
        height: 100%;
        background: url('../../static/login.png') no-repeat;
        background-size: 100% 100%;
    }

data() {
            return {
                screenHeight:''
            }
},
onload(){
    this.screenHeight = uni.getSystemInfoSync().windowHeight;
             console.log(this.screenHeight)
}