uni-app遇到的一些问题

最新推荐文章于 2024-05-30 10:20:55 发布

iijik55

最新推荐文章于 2024-05-30 10:20:55 发布

阅读量3.6k

点赞数 1

分类专栏：前端 html 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/iijik55/article/details/123431726

版权

前端同时被 2 个专栏收录

47 篇文章 1 订阅

订阅专栏

html

47 篇文章 0 订阅

订阅专栏

给placeholder绑定动态变量

placeholder前加：就可以了，后面是变量

<u-input v-model="form.selectDocumentType" class="choiceInput" :placeholder="selectDocumentTypeLabel"/>

form表单中关于一条form-item中多个必填项的prop设置

具体解决方法是在中再包裹一层

<u-form-item label="证件类型" prop="selectDocumentType">
	<view>
		 <u-input v-model="form.selectDocumentType" class="choiceInput" :placeholder="selectDocumentTypeLabel"/>
	</view>
	<view class="typeContainer">
		<u-form-item prop="typeNumber">
			<u-input v-model="form.typeNumber" class="choiceInput" />
		</u-form-item>
	</view>
</u-form-item>

uview的select组件，数据是对的却一直报Cannot read property ‘children‘ of undefined

是因为children:[]为空，我们可以改成

"children": [
							{

								"value": null,
								"label": ""
							}
						]

uview的学习平台

uView: uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水

uView - 多平台快速开发的UI框架 - uni-app UI框架

自定义导航栏

1、在pages.json文件内，将你想要自定义导航栏的内容修改成如下：“navigationStyle”:“custom”

{
    "path": "pages/buyProduct/add",
    "style": {
		"navigationStyle":"custom"
    }
}

2、在App.vue页面获取高度

onLaunch: function() {
			console.log('App Launch')
			uni.getSystemInfo({
							success: function(e) {
								// #ifndef MP
								Vue.prototype.StatusBar = e.statusBarHeight;
								if (e.platform == 'android') {
									Vue.prototype.CustomBar = e.statusBarHeight + 50;
								} else {
									Vue.prototype.CustomBar = e.statusBarHeight + 45;
								};
								// #endif
					
								// #ifdef MP-WEIXIN
								Vue.prototype.StatusBar = e.statusBarHeight;
								let custom = wx.getMenuButtonBoundingClientRect();
								console.log(e.statusBarHeight)
								console.log(custom)
								Vue.prototype.Custom = custom;
								Vue.prototype.CustomBar = (custom.top - e.statusBarHeight)*2 + custom.height;
								// #endif		
					
								// #ifdef MP-ALIPAY
								Vue.prototype.StatusBar = e.statusBarHeight;
								Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
								// #endif
							}
						})

			initApp();
		}

3、在调整自定义导航栏的pages页面调整

<template>
<view style="height: 100%;display: flex;flex-direction: column;">
?? ??? ?<view class="statusBar" :style="{'height': statusBar+'px'}"></view>
?? ??? ?<view class="content">
?? ??? ??? ?<view class="customBar" :style="{'height': customBar+'px'}">
?? ??? ??? ??? ?<u-icon name="arrow-left" color="#000" size="50" class="customBarIcon" ?@click="returnPage"
?? ??? ??? ??? ??? ?:style="{'margin-top': (customBar-21)/2 +'px'}"></u-icon>
?? ??? ??? ??? ?<text class="coustomBarText">新增进货</text>

?? ??? ??? ??? ?<view class="page">

此处是你之前的页面内容

</view>

</view>
?? ??? ?</view>
</template>
<script>
	import {
		validator
	} from '../../js_sdk/validator/buyProduct.js';

	const db = uniCloud.database();
	const dbCollectionName = 'buyProduct';

	function getValidator(fields) {
		let result = {}
		for (let key in validator) {
			if (fields.indexOf(key) > -1) {
				result[key] = validator[key]
			}
		}
		return result
	}

	export default {
		data() {
			return {
				statusBar: 0,
				customBar: 0,
			}
		},
		onLoad() {
			this.statusBar = this.StatusBar;
			this.customBar = this.CustomBar
		},
		methods: {
			returnPage(){
				console.log('=======this.currentStep', this.currentStep)
				if(this.currentStep>0){
					--this.currentStep;
				}else{
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style>

	.page {
		/* margin: 20rpx;
		padding: 6rpx; */
		border-top: 1px solid #eee;
		margin-top: 14px;
		padding-top: 24px;
	}

	.statusBar {
		width: 100%;
		/* 		background-image:url("https://sxgp-innovate-1259195890.file.myqcloud.com/orderfood/of-wx-manager/index/indexBg_top.png");
		background-repeat:no-repeat;
		background-size:100% 100%; */
	}

	.coustomBarText {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -28px;
		margin-top: -8.5px;
		font-size: 14px;
	}

	.customBar {
		position: relative;
	}
</style>

swiper轮播

推荐使用uniapp自带的swiper:uni-app官网

一开始本来使用uview的swiper，发现自定义内容不太好展现。

引入uview

uni-app系列（二）：uniapp 项目引入 uView 并简单使用_Mr_chen的博客-CSDN博客_uniapp使用uview

在内联样式中使用calc
外部scss文件引入问题

uniapp官网示例引入css的方法

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

问题描述
刚开始按照示例引入common.scss文件，common.scss文件中的scss语法都不生效，比如变量被解析成字符串、嵌套写法的样式不生效等，实际表现类似css
正确的引入方法

@import '@/common/common.scss';

小程序onLaunch和onload先后顺序
uniapp 滑太快到底部@scrolltolower没触发，再滑动一下触发2次
uni-app 时间格式问题 IOS系统跟Android系统不兼容

//解决
var newDate = new Date(date.replace(/-/g, ‘/’));
中写position: fixed，在ios下会有兼容性问题
uniapp（Vue）修改对象或数据，页面没有相应更改
原因：
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性, Vue 无法探测普通的新增属性

一、关于修改对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：

但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如

Vue.set(vm.someObject, 'b' ,2)

//或者
his.$set(this.someObject, 'b', 2)

二、关于修改数组

Vue 不能检测以下数组的变动：

可以使用 splice：
vm.items.splice(newLength)

props 传递对象，修改后不能使用问题

同上

微信小程序 CSS border-radius元素 overflow:hidden失效问题（iPhone ios 苹果兼容）

解决方法：
父元素设置以下两个属性：

backface-visibility: hidden;
transform: translate3d(0, 0, 0);

小程序页面内含scroll-view时，在scroll-view组件外滑一下页面，会出现1-2秒卡死状态

解决：

方法一、页面设置position：fixed，固定
方法二、设置整体不能上下滚动
"disableScroll":true, ? ?//微信小程序
"mp-alipay": {
? ? "allowsBounceVertical":"NO" ? ?//支付宝小程序
}

引入外部组件

npm install moment

安装之后，在页面，然后就和之前咱们在网页中是一样的了
import moment from “moment”
navigateTo:fail can not navigateTo a tabbar page

跳转tabBar请用 switchTab(OBJECT)，跳转到 tabBar 页面

//正常
uni.switchTab({
	url:'/pages/home/home'
})


//报错
// uni.navigateTo({
	// 	url: '/pages/home/home'
// })

报错：navigate to:fail webview count limit exceed

redirectTo(Object object)
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

//一开始是这样写的
uni.navigateTo({
url: '/pages'
})
//改成这样写就OK
uni.redirectTo({
url: '/pages'
})

redirectTo:fail can not redirectTo a tabbar page

        //这一段报错
//uni.redirectTo({
			//url: '/pages/home/home'
		//})

//改成如下
		uni.switchTab({
			url: '/pages/home/home'
		})

预览时报错：message：Error: 系统错误，错误码：80051,source size 3432KB exceed max limit 2MB

解决方法：分包加载

uniapp分包_前端小白成长记-CSDN博客

uni-forms内的值没有刷新

要点：v-model，v-if，等等，一般需要初始值，除非在前面加以判断

<uni-forms-item label="商品名称" name="name"
								class="goods-form-item form-item-border form-item-require">
								<input v-model="formData.name" type="text" placeholder="请输入商品名称" />
							</uni-forms-item>



下面一定要定义name初始值
data() {
			return {
				// 表单数据
				formData: {
					name: "",
				},
			}
		},

微信小程序input type=“number” 键盘没有小数点

methods: {

		onLimitNumber(value) {
			value = value.replace(/[^d.]/g,"");//清除"数字"和"."以外的字符
			value = value.replace(/^./g,"");//验证第一个字符是数字而不是字符
			value = value.replace(/.{2,}/g,".");//只保留第一个.清除多余的
			value = value.replace(".","$#$").replace(/./g,"").replace("$#$",".");
			value = value.replace(/^(-)*(d+).(dd).*$/,'$1$2.$3');//只能输入两个小数
			//去除负号（限定输入正数）
			if(value.indexOf('-')>=0){
				value = value.replace(/-/g,'')
			}
			return value;
		},
		onLimitPrice(event) {
			let value = event.detail.value;
			let newValue = this.onLimitNumber(value)
			setTimeout(() => { 
				this.price = newValue
				this.formData.sell_price = this.yuantofen(this.price)
			}, 0)
		},

}

scroll-view 滚动到顶部

层次较浅的直接使用this.$set

层次较深的，必须先使用this. $d e l e t e ，再使用 t h i s .$ set才有效

this.$delete(this.selectGoodsGroups, 'goods')
this.$set(this.selectGoodsGroups, 'goods', optionList)

一个笨方法：

页面代码添加v-if='updateNewData'
<view class="item" v-for="(item1, index1) in rightScroll[index]" :key="index1" v-if='updateNewData'>
</view>


定义updateNewData: true,不然页面进来不会显示

data() {
			return {
				updateNewData: true,
			}
		},


// 在数据变化处添加如下两行代码
this.updateNewData = false;
this.updateNewData = true;

隐藏scroll-view的滚动条

/* 解决小程序和app滚动条的问题 */
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}

本代码参考了链接：uniapp scroll-view 隐藏滚动条的问题_miga1的博客-CSDN博客

uni-app watch无法监听到第一次绑定的变化

改成如下：

<input type="text" v-model="userName"/>  
watch: {
    userName: {
        handler (newName, oldName) {
            console.log(newName)
        },
        immediate: true
    }
}

本代码参考了链接：uni-app watch事件监听三种用法_张志翔的博客-CSDN博客

iijik55

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
uni-app遇到的一些问题

给placeholder绑定动态变量placeholder前加：就可以了，后面是变量<u-input v-model="form.selectDocumentType" class="choiceInput" :placeholder="selectDocumentTypeLabel"/>form表单中关于一条form-item中多个必填项的prop设置具体解决方法是在中再包裹一层<u-form-item label="证件类型" prop="selectDocumen.
复制链接

扫一扫