杨充
2020-05-24
343浏览量
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需要设置高度
v-if和v-show
关于数据绑定
//正确写法
<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中赋值注意
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
<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作用域问题
第一种解决方案
//可以发现这样操作就可以解决作用域问题
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');
}
});
},
在省市区城市列表中
出现问题
解决方案
为何需要key
<!-- 省市区,以及确定按钮 -->
<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>
如何关闭当前页面,返回到上一页面
第一种回传数据
采用uni.$emit()与uni.$on()的方式。$emit是触发事件,$on是接受事件,通过eventName匹配。这种方式有点类似Android中eventBus事件通知
uni.$emit('update',{msg:'页面更新'})
uni.$on('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
第二种回传数据
var pages = getCurrentPages();
//上一个页面
var prevPage = pages[pages.length - 2];
prevPage.setData({
sx1:"参数1",
sx2:"参数2",
})
uni.navigateBack({
delta:1
});
onShow(object){
if(!!object){
console.log('vue onShow' + object)
}
},
第三种回传数据
var pages = getCurrentPages();
//上一个页面
var prevPage = pages[pages.length - 2];
var object={
sx1:"参数1",
sx2:"参数2",
}
//重点$vm
prevPage.$vm.otherFun(object);
uni.navigateBack();
//这个方法写在methons中
otherFun(object){
if(!!object){
console.log(object)
}
}
目前如何回传数据
网络请求指POST的坑
为何会出现这个错误
解决方案
let header = {
'content-type': 'application/x-www-form-urlencoded'
};
const result = await this.$zwwl.api.updateUserInfo(data,header);
如果不添加header头
这两种区别
第三种使用到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>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
集结各类场景实战经验,助你开发运维畅行无忧