uniapp日常开发记录

发布时间 2023-12-14 11:04:25作者: Jackpot_ABC

一、uni-app中u-radio-group和u-radio点击事件的区别

<u-radio-group v-model="hcData.hcqk" style="width: 100%;"
	 :disabled="disabled" @change="radioGroupChange">
		<u-radio v-for="(op, index) in options"
				@change="radioChange"
			 :key="index" :name="op.value" shape="circle">
				{{op.label}}
		</u-radio>
</u-radio-group>

1、u-radio-group中radioGroupChange:

    radioGroupChange(e){
   		console.log(e);//获取当前的选中情况,如未选中则是“”
   	},

2、u-radio中radioChange:

    radioChange(e){
   		console.log(e);//获取当前点击的按钮的值,点哪个显示哪个,不会有""的情况
   	},

二、@change="checkboxGroupChange(r,$event)

$event为子组件传递的值

三、props单向数据流,不要在子组件中修改,若在子组件中修改,会有警告,且watch不会触发,可用子组件变量接收,并通过$emit触发修改父组件的值

四、computed计算属性中使用到的依赖项会自动追踪,如果是个对象的值就追踪整个对象(相当于自动watch),依赖项变更,计算属性也会重新计算,如果没变更就会使用缓存结果,也可以控制其不使用缓存,每次都重新计算

(补充:如果代码中都没有用到该computed属性,那么它的计算不会被触发,可以搭配watch来触发)

五、父组件中mounted中调用异步请求,再把结果作为props传递给子组件,会有问题,要么用async/await控制同步(async返回一个promise对象),要么在子组件中发起请求

六、scroll-view滚动到指定位置

<scroll-view ref="scrollView" :scroll-into-view="focusId" class="dynamic-inspection_form" :scroll-with-animation="true" scroll-y>
	<view :id="id">
</scroll-view>

令focusId等于id即可滚动到该组件位置

七、框架中封装了uni.navigateTo(OBJECT),传递参数时如果不用JSON.stringify(Object)序列化,则都会变成字符型(例如null变成了"null",true变成了"true")

八、手机端无法像浏览器一样直接打开pdf,需要使用插件

九、调试发现真机上是先在外层调子组件的方法,再进行子组件的computed和watch,web则相反,故需要套一层$nextTick