目录介绍
- 01.遇到问题汇总
- 02.关于布局设置
- 03.基础语法总结
- 04.关于交互问题
- 06.关于回传数据
- 07.关于网络请求
- 08.关于页面刷新
- 09.关于注意问题
- 10.待解决和思考
01.遇到问题汇总
- 在我的页面，给item设置分割线时，定义view的class为line出现问题，但是把名称修改成cell-line就可以。猜想可能是设置class名称时，用line有冲突。
- 从A页面跳转B页面，关闭B返回到A，如何回传数据？看了往上方案，发现都有问题，最后用存取值替代。
- 比如切换页面布局视图刷新时，我的页面登陆，未登陆，会员，使用v-if替代v-show方式刷新页面。
- 网络请求，在学员信息页面，使用post提交数据，需要设置header请求头，否则会出现请求异常
- 数据绑定，比如动态改变view的背景颜色，建议用class设置替代style设置
- 在data中给字段赋值，建议赋值方式是''字符串，即使是整型。比如使用sex : "3"替代sex : 3
- 当父，子等多层控件都有点击事件的时候，为了避免冒泡事件冲突，可以加上@tap.stop阻止冒泡事件
- 图片引入，设置相对路径有时不生效，这是为什么？根据柯佳的规范文档，建议url的引入规则使用绝对路径
- 在省市区地区控件中，即使给scroll-view的父view设置了高度，仍然要给scroll-view设置高度，不然会撑满页面
02.关于布局设置
- flex布局属性介绍
- 这个是边写布局，边查询
display: flex; //将对象作为弹性伸缩盒显示 display: inline-flex; //将对象作为内联块级弹性伸缩盒显示 父元素默认根据子元素宽高自适应 //主轴方向 flex-direction: row; //项目排列方向为水平方向，从左端开始 flex-direction: column; //主轴为垂直方向，起点在右端 //如何换行 flex-wrap: nowrap; //项目不换行排列 flex-wrap: wrap; //换行排列，第一行在上方 flex-wrap: reverse; //换行排列，第一行在下方 //主轴对齐方式 justify-content: flex-start //左对齐 justify-content: flex-end //右对齐 justify-content: center //居中 justify-content: space-between //两端对齐，项目之间间隔相等 justify-content: space-around //每个项目两侧间隔相等 //项目在交叉轴上对齐方式 align-items: center; //垂直居中 align-items: flex-start; //交叉轴起点对齐 align-items: flex-end; //交叉轴终点对齐 //多跟轴线的对齐方式 align-content: center; //垂直居中 align-content: flex-start; //交叉轴起点对齐 align-content: flex-end; //交叉轴终点对齐 - 常用的样式
position:sticky //粘性定位(基于用户的滚动位置来定位，使用时需指定特定阈值，如top:0) position:static //默认定位(没有定位) position:fixed //固定定位(固定在窗口位置，窗口滚动也不会移动) position:relative top:10px //相对定位(相对其正常位置定位) position:absolute //绝对定位(相对于最近的已定位父元素，如果没有已定位父元素，则相对于<html>) border-radius:30upx; //圆角半径 text-indent:20px //首行缩进 letter-spacing:1px //字间距 vertical-align: middle; //图片垂直居中 z-index //重叠元素的堆叠顺序 //https://www.cnblogs.com/skura23/p/6505352.html :active，元素被点击时变色，但颜色在点击后消失 :focus， 元素被点击后变色，且颜色在点击后不消失 - css中font不支持简写
//错误 font：bold 28rpx； //正确 font-size:28rpx; font-weight:bold; - scroll-view需要设置高度
- 在省市区地区控件中，给父view设置高度500rpx，如果不给地区scroll-view设置高度，则地区内容会盛满控件，这样会导致切换省市区页面抖动。
- 解决办法，给子scroll-view同样需要设置高度。
03.基础语法总结
- v-if和v-show
- 比如在我的页面，有登陆状态，会员状态，还有未登陆状态，且布局可以动态隐藏和显示，这个时候就用到v-if
- v-if 和 v-show 的区别：前者是否会在dom中被移除，后者 display:none
- 针对刷新切换视图，比如登陆/为登陆，建议使用v-if。
- 使用场景如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。更多内容阅读这篇文章
- 关于数据绑定
- 比如用户中心选择性别，选择切换颜色，需要注意书写规范。代码如下所示：
//正确写法 <text class="cell-sex" :class="{'cell-sex-select': isSelcetMan}" @click="clickMan">男</text> <text class="cell-sex" :class="{'cell-sex-select': !isSelcetMan}" @click="clickWoman">女</text> //错误写法 <text :style="{color:isSelcetMan?'#F88B32':'#666666'}" class="cell-sex" @click="clickMan">男</text> <text :style="{color:!isSelcetMan?'#F88B32':'#666666'}" class="cell-sex" @click="clickWoman">女</text> - 关于data中赋值注意
- 在学员信息页面，在data中设置sex为整型的时候，发现提交学员信息报500异常，但是如果赋值改成"3"，就发现可以呢。难道是即使绑定的是数字，网页与移动端获取到的也只会是字符串
export default { data() { return { //性别，1男，2女 sex : "3", // sex : 3, }; }, } //提交学员信息，sex参数是整型 async updateUserInfo(name,sex,birthday,grade,school_id,entrance_year) { const data = { sex : sex, }; let header = { 'content-type': 'application/x-www-form-urlencoded' }; const result = await this.$zwwl.api.updateUserInfo(data,header); //网络请求成功 if(result.data!=null && result.code == 200){ } }, - 关于@tap.stop.prevent
- 比如选择城市列表控件中，省，市，区三级tab。点击省列表item，请求该省的市数据，然后切换到该市的tab页面。同时，选择完成后，点击控件关闭城市列表弹窗
- 什么叫做事件冒泡：点击外面的时候，不会触发里面元素的事件；但是点击里面元素的时候，就会触发外面元素的事件，这就是事件冒泡！！具体可以看这篇博客
- 阻止事件冒泡时要在外层加一层标签<view @tap.stop="onAreaItemClick(ind)"></view>，直接在需要使用的方法上加.stop无效
<view v-if="tabTitle.length > 0 && show" :class="[{'tabBlock__animation' :show},'tabBlock']" @tap.stop.prevent="onClickModule"> <!-- 省市区，以及确定按钮 --> <scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll"> <view :class="'tab'" id="tab_list" > <view v-for="(item, index) in tabTitle" :key="index" :class="['tab__item',{'tab__item--active':currentIndex === index}]" :style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item" @tap.stop.prevent="onSelect(index)"> <view class="tab__item-title"> {{item.title}} </view> </view> <view class="confirm" @tap.stop.prevent="onConfirm"> 确定 </view> <view class="tab__line" :style="{ background: lineColor, width: lineStyle.width, transform: lineStyle.transform,transitionDuration: lineStyle.transitionDuration}"></view> </view> </scroll-view> <!-- 地区数据 --> <scroll-view class="content-view" scroll-y="true"> <view class="item-view" v-for="(item,ind) in areaListData" :key="ind" @tap.stop.prevent="onAreaItemClick(ind)"> <view class="desc">{{item.name}}</view> <view class="cell-line"></view> </view> </scroll-view> </view> - this作用域问题
- 第一种解决方案
- 解决办法就是在闭包之外先把this赋值给另一个变量
//可以发现这样操作就可以解决作用域问题 changeTitle3(){ //赋值 var me = this; uni.setStorage({ key: 'storage_key', data: 'hello', success: function () { me.title = "改变标题3"; console.log('changeTitle2------success'); } }); }, - 第二种解决方案
- 使用箭头函数也可以解决该问题，思考一下这是为什么？但是不建议使用这种……
changeTitle4(){ uni.setStorage({ key: 'storage_key', data: 'hello', success:() => { this.title = "改变标题4"; console.log('changeTitle2------success'); } }); },
- 第一种解决方案
04.关于交互问题
- 在省市区城市列表中
- 出现问题
- 当切换不同省，获取城市数组的顺序发生变更后，点击事件接收到的 index 索引并不会随着更新，还是数组顺序发生变更前的索引值。
- 解决方案
- 当页面需要同时存在两个或两个以上的v-for的时候，key的值就需要根据你最终应用的环境来正确设置。如果是适应多端平台的话，以下方法可以作为参考：
- 1、把一些需要v-for的部分做成组件，这样页面上就不存在多个 v-for
- 2、使用遍历的元素的某个字段值作为key，但是这个字段值必须是唯一的不重复的，如下：list.id等等
- 为何需要key
- 可以参考:演示v-for为什么要加key
- 使用 v-for 循环整数时和其他平台存在差异，如 v-for="(item, index) in array" 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。
<!-- 省市区，以及确定按钮 --> <scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll"> <view :class="'tab'" id="tab_list" > <view v-for="(item, index) in tabTitle" :key="index" :class="['tab__item',{'tab__item--active':currentIndex === index}]" :style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item" @tap.stop.prevent="onSelect(index)"> <view class="item-title">{{item.title}}</view> </view> </view> </scroll-view> <!-- 地区数据 --> <scroll-view class="content-view" scroll-y="true"> <view class="item-view" v-for="(item,ind) in areaListData" :key="ind" @tap.stop.prevent="onAreaItemClick(ind)"> <view class="desc">{{item.name}}</view> <view class="cell-line"></view> </view> </scroll-view>
- 出现问题
06.关于回传数据
- 如何关闭当前页面，返回到上一页面
- 页面返回 调用uni.navigateBack、用户按左上角返回按钮、安卓用户点击物理back按键
- 第一种回传数据
- 采用uni.$emit()与uni.$on()的方式。$emit是触发事件，$on是接受事件，通过eventName匹配。这种方式有点类似Android中eventBus事件通知
- uni.$emit(eventName,OBJECT)
uni.$emit('update',{msg:'页面更新'})- uni.$on(eventName,callback)
uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); }) - 存在问题：需要接触监听，监听事件会执行多次
- 采用uni.$emit()与uni.$on()的方式。$emit是触发事件，$on是接受事件，通过eventName匹配。这种方式有点类似Android中eventBus事件通知
- 第二种回传数据
- 在b页面操作
var pages = getCurrentPages(); //上一个页面 var prevPage = pages[pages.length - 2]; prevPage.setData({ sx1:"参数1", sx2:"参数2", }) uni.navigateBack({ delta:1 });- 在a页面操作
onShow(object){ if(!!object){ console.log('vue onShow' + object) } },- 报错问题："message": "prevPage.setData is not a function"
- 第三种回传数据
- 在b页面操作
var pages = getCurrentPages(); //上一个页面 var prevPage = pages[pages.length - 2]; var object={ sx1:"参数1", sx2:"参数2", } //重点$vm prevPage.$vm.otherFun(object); uni.navigateBack();- 在a页面操作
//这个方法写在methons中 otherFun(object){ if(!!object){ console.log(object) } }- 报错问题："message": "prevPage.$vm.otherFun is not a function",
- 目前如何回传数据
- 还没有找到好方案，请教同事说，先保存数据，关闭页面，然后在onShow方法获取
07.关于网络请求
- 网络请求指POST的坑
- 在学员中心，用户填完数据后，需要提交数据请求接口。使用到post请求，注意，一定需要添加请求header，否则无法上传数据
- 为何会出现这个错误
- 以 POST 方式进行网络请求时，如果不添加header头是无法进行正常的网络请求的，此时默认的请求方式content-type类型是application/json
- 解决方案
let header = { 'content-type': 'application/x-www-form-urlencoded' }; const result = await this.$zwwl.api.updateUserInfo(data,header); - 参考文章：uni-app 网络请求指POST的坑
- 如果不添加header头
- 可以直接查看不添加header头，默认的content-type是：application/json;charset=UTF-8
- 添加header头，设置为'content-type': 'application/x-www-form-urlencoded'
- 这两种区别
- application/x-www-form-urlencoded表示表单，上传参数的格式为key=value&key=value
- application/json代表参数以json字符串传递给后台
08.关于页面刷新
- 比如，在登陆页面，有未登陆，登陆，会员等多种状态view，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。
- 第一种是用原始方法：location.reload();不过是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。
- 第二种是用vue自带的路由跳转：this.$router.go(0);和第一种一样，强制刷新。
- 第三种使用到v-if，具体操作如下所示，只需要改变isShow的属性值即可刷新
<template> <view> <!-- v-if v-show 的区别：前者是否会在dom中被移除，后者 display:none --> <view v-show="isShow"> now you see me haha </view> </view> </template> <script> export default { data() { return { isShow: true, }; } } </script> <style> </style>
09.关于注意问题
- 组件内引入图片要使用绝对路径。使用这种/static/...是最好的
- 主页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用原来的created与mounted
- 阻止事件冒泡时要在外层加一层标签<view @tap.stop="stop"></view>，直接在需要使用的方法上加.stop无效
- 不要引入体积大的js，如果是超过500k，工具编译的时候会给提示
- 比如，在地区选择控件中，省，市，区是三个接口。避免滚动监听请求接口数据，当监听 scroll-view 的滚动事件时，视图层会频繁的向逻辑层发送数据
10.待解决和思考
- 关于页面关闭，返回上一页面，需要传递数据，具体该如何操作才有效？
- 长列表中如果每个item有一个加入购物车按钮，点击后数字+1，如何才能不刷新整个list？
来源：oschina
链接：https://my.oschina.net/zbj1618/blog/4288739