uni-app &＃43; uview 开发
1.css选择器 书写样式与v-for 结合使用 渲染样式会出现错乱
解决&＃xff1a;目前是放弃使用css选择器,避开这个问题
2.textarea层级问题
textarea在微信小程序 依旧存在层级问题&＃xff1b;当触发的事件的区域和textarea有区域交互时&＃xff0c;该事件不会触发
3.关于
因为像素单位用的是rpx&＃xff0c;所以整个布局会随机型的变化&＃xff0c;进行相应的像素比例调整
- 如下这种做法&＃xff0c;即将高度的单位用px;然后获取移动端的屏幕高度。进行计算&＃xff1b;普通机型是行的通的&＃xff1b;但是不兼容ipad等超大屏机型
const res &＃61; uni.getSystemInfoSync();let top &＃61; res.safeArea.top;this.HEIGHT &＃61; res.windowHeight - 50 - 60 - 48 - top &＃43; &＃39;px&＃39;;
- so,可用如下方法&＃xff1b;具体API参考uni-app官方文档;注&＃xff1a;uni.createSelectorQuery()该API需写在mounted中
mounted() {const res &＃61; uni.getSystemInfoSync();const query &＃61; uni.createSelectorQuery().in(this);query.selectAll(&＃39;.buttom-btn-choose,.nav-top&＃39;).boundingClientRect(data &＃61;> {this.HEIGHT &＃61; res.windowHeight - data[0].bottom - data[1].height &＃43; &＃39;px&＃39;;}).exec();},
4.关于watch侦听器 --- 深度监听
- 对于负责数据类型&＃xff0c;array,object&＃xff1b;简单的写法是不会监听到数据的变化的&＃xff1b;需要加上deep属性
watch: {goods_spec_arr: {handler(newData, oldData) {let frist &＃61; &＃39;&＃39;;if (this.checked) {oldData.forEach((item, index) &＃61;> {if (index &＃61;&＃61; 0) {return;}if (index &＃61;&＃61; 1) {frist &＃61; item.price;return;}
if (frist !&＃61; item.price) {this.checked &＃61; false;}});
if (this.checked) {let second &＃61; &＃39;&＃39;;oldData.forEach((item, index) &＃61;> {if (index &＃61;&＃61; 0) {second &＃61; item.price;return;}item.price &＃61; second;});}}},deep: true},checked(val) {if (val) {this.goods_spec_arr.forEach(item &＃61;> {item.price &＃61; this.goods_spec_arr[0].price;});}}}
- 注&＃xff1a;在watch不能进行数组操作&＃xff1b;如unshift,splice等&＃xff1b;但可以对其键值对进行操作
5.组件封装使用
5.1 组件创建
5.2 组件
5.3 在页面中使用组件
import getPicture from &＃39;../../../components/getPicture.vue&＃39;; // 导入组件
export default {// 注册组件components: { getPicture },
}
在页面中使用
京公网安备 11010802041100号