初始化（包含登录模块）
This commit is contained in:
36
pages/component/view/view.test.js
Normal file
36
pages/component/view/view.test.js
Normal file
@@ -0,0 +1,36 @@
|
||||
describe('pages/component/view/view.vue', () => {
|
||||
let page
|
||||
beforeAll(async () => {
|
||||
// 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
|
||||
page = await program.reLaunch('/pages/component/view/view')
|
||||
await page.waitFor(1000)
|
||||
})
|
||||
|
||||
/**
|
||||
* 测试步骤
|
||||
* 1. 检测页面标题是否为 view
|
||||
*/
|
||||
it('view 组件标题', async () => {
|
||||
let view = await page.$('.common-page-head-title')
|
||||
expect(await view.text()).toBe('view')
|
||||
})
|
||||
/**
|
||||
* 测试步骤
|
||||
* 1. uni-flex 的个数
|
||||
* 2. flex-item 的个数
|
||||
*/
|
||||
it('view 个数', async () => {
|
||||
let viewLen = await page.$$('.uni-flex')
|
||||
expect(viewLen.length).toBe(18)
|
||||
let viewItemLen = await page.$$('.flex-item')
|
||||
expect(viewItemLen.length).toBe(6)
|
||||
})
|
||||
/**
|
||||
* 测试步骤
|
||||
* 1. 第一个颜色块的色值是否为 rgb(247, 98, 96)
|
||||
*/
|
||||
it('view 前三个元素颜色', async () => {
|
||||
let viewRed = await page.$('.uni-bg-red')
|
||||
expect(await viewRed.style('backgroundColor')).toBe('rgb(247, 98, 96)')
|
||||
})
|
||||
})
|
||||
146
pages/component/view/view.vue
Normal file
146
pages/component/view/view.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="view"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-hello-text">
|
||||
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction:
|
||||
row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: row
|
||||
<text>\n横向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="flex-item uni-bg-red">A</view>
|
||||
<view class="flex-item uni-bg-green">B</view>
|
||||
<view class="flex-item uni-bg-blue">C</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: column
|
||||
<text>\n纵向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-column">
|
||||
<view class="flex-item flex-item-V uni-bg-red">A</view>
|
||||
<view class="flex-item flex-item-V uni-bg-green">B</view>
|
||||
<view class="flex-item flex-item-V uni-bg-blue">C</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
更多布局示例
|
||||
<text>\nflex布局演示</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="text">纵向布局-自动宽度</view>
|
||||
<view class="text" style="width: 300rpx;">纵向布局-固定宽度</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text">横向布局-自动宽度</view>
|
||||
<view class="text">横向布局-自动宽度</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
|
||||
<view class="text">横向布局-居中</view>
|
||||
<view class="text">横向布局-居中</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
|
||||
<view class="text">横向布局-居右</view>
|
||||
<view class="text">横向布局-居右</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
|
||||
<view class="text">横向布局-两端对齐</view>
|
||||
<view class="text">横向布局-两端对齐</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="width: 200rpx;">固定宽度</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">自动占满余量</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="width: 200rpx;">固定宽度</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">自动占满</view>
|
||||
<view class="text" style="width: 200rpx;">固定宽度</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
|
||||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
|
||||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
|
||||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-start;align-items: flex-start;">
|
||||
<text>垂直居顶</text>
|
||||
</view>
|
||||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
|
||||
<text>垂直居中</text>
|
||||
</view>
|
||||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;">
|
||||
<text>垂直居底</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
组合示例
|
||||
<text>\nflex布局演示</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text uni-flex" style="width: 200rpx;height: 220rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
|
||||
<image src="../../../static/plus.png" style="width: 150rpx;height: 150rpx;"></image>
|
||||
</view>
|
||||
<view class="uni-flex uni-column" style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">
|
||||
<view class="text" style="height: 120rpx;text-align: left;padding-left: 20rpx;padding-top: 10rpx;">
|
||||
文字居左，留出左间距
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">剩余数量</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flex-item {
|
||||
width: 33.3%;
|
||||
height: 200rpx;
|
||||
text-align: center;
|
||||
line-height: 200rpx;
|
||||
}
|
||||
|
||||
.flex-item-V {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
text-align: center;
|
||||
line-height: 150rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 15rpx 10rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #ebebeb;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
/* text-indent: 40rpx; */
|
||||
}
|
||||
.flex-pc {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user