Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
342d2018
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6017
Star
91
Fork
164
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
342d2018
编写于
9月 27, 2023
作者:
shutao-dc
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update view.uvue
上级
8eb65dcf
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
60 addition
and
135 deletion
+60
-135
pages/component/view/view.uvue
pages/component/view/view.uvue
+60
-135
未找到文件。
pages/component/view/view.uvue
浏览文件 @
342d2018
<template>
<template>
<page-head title="view"></page-head>
<view class="main" :hover-class="hover_class ? 'is-parent-hover' : 'none'">
<view class="test-view" :hover-class="hover_class ? 'is-hover' : 'none'" :hover-stop-propagation="stop_propagation" :hover-start-time="start_time" :hover-stay-time="stay_time">
</view>
</view>
<!-- #ifdef APP -->
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<scroll-view style="flex: 1">
<!-- #endif -->
<!-- #endif -->
<view>
<view class="content">
<page-head title="view"></page-head>
<boolean-data :defaultValue="false" title="是否指定按下去的样式类" @change="change_hover_class_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否阻止本节点的祖先节点出现点击态" @change="change_stop_propagation_boolean"></boolean-data>
<enum-data :items="start_time_enum" title="按住后多久出现点击态" @change="radio_change_start_time_enum"></enum-data>
<enum-data :items="stay_time_enum" title="手指松开后点击态保留时间" @change="radio_change_stay_time_enum"></enum-data>
<view class="uni-padding-wrap uni-common-mt uni-common-mb">
<view class="uni-padding-wrap uni-common-mt uni-common-mb">
<view>
<text class="uni-hello-text"> Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction: row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。 </text>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> flex-direction: row </text>
<text class="uni-subtitle-text"> 横向布局 </text>
</view>
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red"><text style="color: #fff">A</text></view>
<view class="flex-item uni-bg-green"><text style="color: #fff">B</text></view>
<view class="flex-item uni-bg-blue"><text style="color: #fff">C</text></view>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> flex-direction: column </text>
<text class="uni-subtitle-text"> 纵向布局 </text>
</view>
<view class="uni-flex uni-column">
<view class="flex-item flex-item-V uni-bg-red"><text style="color: #fff">A</text></view>
<view class="flex-item flex-item-V uni-bg-green"><text style="color: #fff">B</text></view>
<view class="flex-item flex-item-V uni-bg-blue"><text style="color: #fff">C</text></view>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 更多布局示例 </text>
<text class="uni-subtitle-text"> flex布局演示 </text>
</view>
<view>
<view class="text-box"><text class="text">纵向布局-自动宽度</text></view>
<view class="text-box" style="width: 300rpx"><text class="text">纵向布局-固定宽度</text></view>
<view class="text-box"><text class="text">横向布局-自动宽度</text></view>
<view class="text-box"><text class="text">横向布局-自动宽度</text></view>
</view>
<view class="uni-flex uni-row" style="-webkit-justify-content: center; justify-content: center">
<view class="text-box"><text class="text">横向布局-居中</text></view>
<view class="text-box"><text class="text">横向布局-居中</text></view>
</view>
<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end; justify-content: flex-end">
<view class="text-box"><text class="text">横向布局-居右</text></view>
<view class="text-box"><text class="text">横向布局-居右</text></view>
</view>
<view class="uni-flex uni-row">
<view class="text-box" style="-webkit-flex: 1; flex: 1"><text class="text">横向布局-平均分布</text></view>
<view class="text-box" style="-webkit-flex: 1; flex: 1"><text class="text">横向布局-平均分布</text></view>
</view>
<view class="uni-flex uni-row" style="-webkit-justify-content: space-between; justify-content: space-between">
<view class="text-box"><text class="text">横向布局-两端对齐</text></view>
<view class="text-box"><text class="text">横向布局-两端对齐</text></view>
</view>
<view class="uni-flex uni-row">
<view class="text-box" style="width: 200rpx"><text class="text">固定宽度</text></view>
<view class="text-box" style="-webkit-flex: 1; flex: 1"><text class="text">自动占满余量</text></view>
</view>
<view class="uni-flex uni-row">
<view class="text-box" style="width: 200rpx"><text class="text">固定宽度</text></view>
<view class="text-box" style="-webkit-flex: 1; flex: 1"><text class="text">自动占满</text></view>
<view class="text-box" style="width: 200rpx"><text class="text">固定宽度</text></view>
</view>
<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap; flex-wrap: wrap">
<view class="text-box" style="width: 320rpx"><text class="text">一行显示不全,wrap折行</text></view>
<view class="text-box" style="width: 320rpx"><text class="text">一行显示不全,wrap折行</text></view>
<view class="text-box" style="width: 320rpx"><text class="text">一行显示不全,wrap折行</text></view>
</view>
<view class="uni-flex uni-row">
<view class="text-box" 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 class="text" style="line-height: 70rpx">垂直居顶</text>
</view>
<view class="text-box" style="-webkit-flex: 1; flex: 1; height: 200rpx; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center">
<text class="text">垂直居中</text>
</view>
<view class="text-box" 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 class="text" style="line-height: 70rpx">垂直居底</text>
</view>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 组合示例 </text>
<text class="uni-subtitle-text"> flex布局演示 </text>
</view>
<view class="uni-flex uni-row">
<view class="text-box 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-box" style="height: 120rpx; justify-content: start; align-items: start; padding-left: 20rpx">
<text class="text" style="line-height: 70rpx">文字居左，留出左间距</text>
</view>
<view class="uni-flex uni-row">
<view class="text-box" style="-webkit-flex: 1; flex: 1">
<text class="text">剩余数量</text>
</view>
<view class="text-box" style="-webkit-flex: 1; flex: 1">
<text class="text">立即购买</text>
</view>
</view>
</view>
</view>
<button class="uni-common-mt" @click="goGeneralAttribute('/pages/component/view/view-draw')">DrawableContext</button>
<button class="uni-common-mt" @click="goGeneralAttribute('/pages/component/view/view-draw')">DrawableContext</button>
</view>
</view>
</view>
</view>
...
@@ -112,8 +21,31 @@
...
@@ -112,8 +21,31 @@
<!-- #endif -->
<!-- #endif -->
</template>
</template>
<script>
<script>
import { type ItemType } from '@/components/enum-data/enum-data.vue'
export default {
export default {
data() {
return {
hover_class: false,
stop_propagation: false,
start_time: 50,
stay_time: 400,
start_time_enum: [{ "value": 50, "name": "50毫秒" }, { "value": 200, "name": "200毫秒" }] as ItemType[],
stay_time_enum: [{ "value": 400, "name": "400毫秒" }, { "value": 200, "name": "200毫秒" }] as ItemType[]
}
},
methods: {
methods: {
change_hover_class_boolean(checked : boolean) {
this.hover_class = checked
},
change_stop_propagation_boolean(checked : boolean) {
this.stop_propagation = checked
},
radio_change_start_time_enum(time : number) {
this.start_time = time
},
radio_change_stay_time_enum(time : number) {
this.stay_time = time
},
goGeneralAttribute(path: string) {
goGeneralAttribute(path: string) {
uni.navigateTo({
uni.navigateTo({
url: path,
url: path,
...
@@ -124,32 +56,25 @@ export default {
...
@@ -124,32 +56,25 @@ export default {
</script>
</script>
<style>
<style>
.flex-item {
.main {
width: 33.3%;
padding: 10rpx 0;
height: 200rpx;
flex-direction: row;
display: flex;
justify-content: center;
justify-content: center;
align-items: center;
}
}
.test-view {
.flex-item-V {
height: 200px;
width: 100%;
width: 200px;
height: 150rpx;
background-color: white;
}
.text-box {
margin: 15rpx 10rpx;
padding: 0 20rpx;
background-color: #ebebeb;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
}
.text {
.text {
color: #777;
color: #777;
font-size: 26rpx;
font-size: 26rpx;
}
}
.is-hover {
background-color: #179b16;
}
.is-parent-hover {
background-color: #aa0000;
}
</style>
</style>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
