Uniapp常见问题整理

丹婶

已于 2023-04-17 14:07:59 修改

阅读量237

点赞数

分类专栏： uniapp 文章标签：前端 javascript vue Powered by 金山文档

于 2023-02-13 15:50:11 首次发布

本文链接：https://blog.csdn.net/qq_37301074/article/details/129010129

版权

uniapp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

背景：

最近在用uniapp框架做小程序，其中遇到了一些小问题，总结记录下

问题：

textarea 组件实时查询输入的字符个数？

解决：

//@input方法 
 <textarea name="desc" maxlength="500" id="desc" v-model="info.desc" @input="getWordnum" placeholder="请输入"></textarea>

报错信息：conflicts with v-model on the same element because the latter already expands to a value

<input maxlength="6" v-model="name" type="text" data-title="xm" name="name" :value="name?name:''" placeholder="请输入">

解决：

:value 和v-model作用在同一个元素上引起冲突，使用 :name="..." 代替 :value="" 即可。

上传图片将官方图片demo的9张更改为单张图片上传？

解决：

uni.chooseImage({
    sourceType: sourceType[this.sourceTypeIndex],
    sizeType: sizeType[this.sizeTypeIndex],
    success: (res) => {
        this.img = res.tempFilePaths[0]; //单张
    },
    fail: (err) => {
    }
)}

报错：<template> cannot be keyed. Place the key on real elements instead.

原因: 不支持 tempalte 上绑定属性。

如：

//报错代码块
<block  v-for="(item,index) in project" :key="index">
</block>

解决:可更改为view，但支持v-if v-else语句

view展示textarea内容，保持原换行格式：

添加css:

<view class="pingjia" style="white-space:pre-wrap;">
    {{info.evaluation}}
</view>

vue实现锚点定位：

//动态锚点定位
miaoddianFun:function(e){
    var that = this;
    var _maodian = e.currentTarget.dataset.maodian;
    const query = uni.createSelectorQuery().in(that);
    query.select('#'+_maodian).boundingClientRect(data => {
        if(data){
            var _top = data.top;
            uni.pageScrollTo({
                scrollTop: _top
            })
        }
    }).exec();
}

自定义函数根据更新时间：一小时内显示几秒几分钟前；超过一个小时直接显示时间：

getDiffTime:function(old_date){
    var now_time = new Date().getTime();
    var old_date_reg = old_date.replace(/\-/g, "/")
    var old_time = new Date(old_date_reg).getTime();
    
    var subtime = parseInt((parseInt(now_time) - parseInt(old_time)) / 1000);  //计算时间差,并将毫秒转化为秒
    if(subtime>3600){ //超过1小时
        return old_date;
    }else{
        var mins = parseInt(subtime % 3600 / 60); //分钟
        var secs = parseInt(subtime % 60); //秒
        if(mins>0){
            return mins + "分钟"+secs+'秒前';
        }else{
            return secs+'秒前';
        }
    }
},

接口调用基础语法：

that.$request({
    url:that.$api.testapi,
    method:'POST',
    data:{'id':id}
}).then(function (res){
    if(res.code==200){
        that.$utils.showSuccess(res.msg);
        setTimeout(function (){
            uni.navigateBack();//返回上一页
        },500);
    }else {
        that.$utils.showToast(res.msg);
    }
})