uniApp常用套路

一、配合uni-load-more更多实现分页

1、组件：uni-load-more

<view>
    <uni-load-more :status="loadingData.status" :contentText="loadingData.contentText"></uni-load-more>
</view>

2、定义加载状态数据data

const loadingData = reactive({
    // 加载true，到底false
    reload: false,
    status: 'more',
    contentText: {
        contentdown: '上拉加载更多',
        contentrefresh: '加载中',
        contentnomore: '已经全部加载完毕'
    }
})

3、分页请求参数

const formData=reactive({
    pageSize: 10,
    pageNum: 1
})

4、具体方法实现：请求接口成功之后，判断加载状态，处理数据

const getData=()=>{
    http.get("app-api/cf/findList",formData).then(res=>{
        
        pageData.cfInfo=pageData.cfInfo.concat(res.data)
        if (formData.pageSize > res.data.length) {
            loadingData.reload = false
            loadingData.status = 'noMore'
            uni.stopPullDownRefresh();
        } else {
            loadingData.status = 'more'
            loadingData.reload = true
        }
    })
}

5、上拉加载

onReachBottom(()=>{
    if (loadingData.reload) {
        formData.pageNum++
        loadingData.status = 'loading'
        getData()
    }
})

6、下拉刷新

onPullDownRefresh(()=>{
    formData.pageNum = 1
    loadingData.reload = true
    pageData.cfInfo = []
    getData()
})

二、图片上传

1、组件：uni-file-picker

<uni-file-picker limit="4" :modelValue="pageData.imageList" @select="selectImg" @delete="deleteImg"></uni-file-picker>

2、常用属性

readonly：组件只读，不可选择，不显示进度，不显示删除按钮。true只读，false取消只读

limit：最大选择个数

3、事件

(1)@select：选择图片

const selectImg=(e)=>{
    e.tempFiles.forEach(item=>{
        uni.showLoading({
            title: '图片上传....',
            mask: true
        });
        //调用图片上传接口
        http.upload("oss/upload",{file:item.file}).then(e => {
            uni.hideLoading()
            item.id = e.id
            pageData.resList.detail.imageIds=[]
            pageData.imageIdList.push(e.id)
       
        })
    })
}

(2)@delete：删除图片

const deleteImg=(e)=>{
    let index=0
    index = pageData.imageList.indexOf(e.tempFilePaths)
    pageData.imageList.splice(index,1)
}

三、路由跳转传值

1、传递参数

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

// 在test.vue页面接受参数
onLoad((option)=>{
    //option为object类型，会序列化上个页面传递的参数
    console.log(option.id); //打印出上个页面传递的参数。    
    console.log(option.name); //打印出上个页面传递的参数。
})

2、传递对象、特殊字符

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?item='+encodeURIComponent(JSON.stringify(item))
});

// 在test.vue页面接受参数
onLoad((option)=>{
    const item = JSON.parse(decodeURIComponent(option.item));
})

四、loading提示框

//显示
uni.showLoading({
    title: '加载中',
    mask:true //true时防止触摸穿透
});
//隐藏 
uni.hideLoading();
//两者是一组的，要搭配使用

五、数据缓存

1、uni.setStorage(OBJECT)

uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});

2、uni.getStorage(OBJECT)

uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});