改写原代码的原因:
1、 更换掉腾讯IM集成。
2、更换掉vant,项目中原来同时使用uniapp的组件 与vant组件 ,搞得小程序各个页面风格不一致;
3、修改bug
4、总体采取flex布局;
5、用到的uniapp组件 包括 seach、step、scroll-view、checkbox-group、radio-group、uni-popup组件等
本文主要描述uniapp编写的小程序端代码。
发起图文会诊的准备有四个步骤为 :发起图文-->选择患者->选择团队->选择医生,
-->
-->
-->
template代码如下:
<template>
<view class="content">
<!-- <van-steps :steps="steps" :active="activeIndex" @change="handleChange">
<template v-for="(step, index) in steps" :key="index">
<van-step title="aa" :description="step.description" @next="handleNext(index + 1)">
</van-step>
</template>
</van-steps> -->
<!-- <uni-steps :active="activeIndex" >
<uni-step v-for="(step, index) in steps" :key="index" :title="step.text" :description="step.description">
</uni-step>
</uni-steps> -->
<uni-steps :options="steps" :active="activeIndex" />
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="contentItem" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll">
<!-- <view class="contentItem"> -->
<view v-if="activeIndex === 0" class="view_right">
<!-- <van-search placeholder="请输入患者" v-model="searchText" shape="round" @search="onSearch" /> -->
<uni-search-bar @confirm="onSearch" :focus="true" v-model="searchText" @input="input" @cancel="cancel"
@clear="clear">
</uni-search-bar>
<!-- <van-cell title="选择日期区间" :value="date" @click="onDisplay" /> -->
<!-- <van-calendar :show="show" type="range" @close="onClose" @confirm="onConfirm" /> -->
<!-- <van-checkbox-group :value="result" @change="onChange">
<van-cell-group>
<van-cell v-for="(item, index) in patients" :key="index" :title="item.patientName"
:label="item.disease">
<van-checkbox :name="item.id" class="cell_checkbox" />
</van-cell>
</van-cell-group>
</van-checkbox-group> -->
<view class="uni-list">
<checkbox-group @change="checkboxChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in patients" :key="item.id">
<view>
<checkbox :value="item.id" :checked="this.isSelected(item.id)" />
</view>
<view>{{ item.patientName }}--{{ item.disease }}</view>
</label>
</checkbox-group>
</view>
</view>
<view v-if="activeIndex === 1" class="view_right">
<!--<van-radio-group v-model="result_group">
<van-cell-group>
<van-cell v-for="(item, index) in teamList" :key="index" :title="item.name">
<van-radio slot="right-icon" :name="item.id" />
</van-cell>
</van-cell-group>
</van-radio-group> -->
<view class="uni-list">
<radio-group @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in teamList"
:key="item.value">
<view>
<radio :value="item.value" :checked="index === current" />
</view>
<view>{{ item.name }}</view>
</label>
</radio-group>
</view>
</view>
<view v-if="activeIndex === 2" class="view_right">
<!-- <van-checkbox-group :value="result_doctor" @change="onChange_doctor">
<van-cell-group>
<van-cell v-for="(item, index) in doctors" :key="index" :title="item.userName"
:label="postList.find(o => o.value === item.positionName).text">
<van-checkbox :name="item.id" class="cell_checkbox" />
</van-cell>
</van-cell-group>
</van-checkbox-group> -->
<view class="uni-list">
<checkbox-group @change="onChange_doctor">
<view class="uni-list-cell-group" style="margin-right: 30rpx;">
<label v-for="(item, index) in doctors" :key="item.id"
class="uni-list-cell uni-list-cell-pd">
<view>
<checkbox :value="item.id" :checked="this.isDoctorSelected(item.id)" />
</view>
<view class="cell-content">
<text>{{ item.userName }}</text>
<text>(</text>
<text>{{ postList.find(o => o.value === item.positionName).text }}</text>
<text>)</text>
</view>
</label>
</view>
</checkbox-group>
</view>
</view>
<!-- </view> -->
</scroll-view>
<!-- <van-row>
<van-col span="12">
<van-button @click="handlePrevious" :disabled="activeIndex === 0" shape="round" block="true"
size="small">上一步</van-button>
</van-col>
<van-col span="12">
<van-button v-if="activeIndex !== steps.length - 1" @click="handleNext" shape="round" type="primary"
block size="small">下一步</van-button>
<van-button v-if="activeIndex === steps.length - 1" @click="handleCreateMeet" shape="round"
type="primary" block size="small">新建活动</van-button>
</van-col>
</van-row> -->
<!-- <uni-row>
<uni-col span="21">
<uni-button @click="handlePrevious" :disabled="activeIndex === 0" type="default" shape="round"
block>上一步</uni-button>
</uni-col>
<uni-col span="12">
<uni-button v-if="activeIndex !== steps.length - 1" @click="handleNext" type="primary" shape="round"
block>下一步</uni-button>
<uni-button v-if="activeIndex === steps.length - 1" @click="handleCreateMeet" type="primary"
shape="round" block>新建活动</uni-button>
</uni-col>
</uni-row> -->
<uni-row class="demo-uni-row" :width="nvueWidth">
<uni-col :span="12">
<view class="demo-uni-col ">
<button @click="handlePrevious" :disabled="activeIndex === 0" type="primary"
shape="round">上一步</button>
</view>
</uni-col>
<uni-col :span="12">
<view class="demo-uni-col">
<button v-if="activeIndex !== steps.length - 1" @click="handleNext" type="primary"
shape="round">下一步</button>
<button v-if="activeIndex === steps.length - 1" @click="handleCreateMeet" type="primary"
shape="round">新建活动</button>
</view>
</uni-col>
</uni-row>
<!-- 输入框示例 -->
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="input" title="新建活动信息" value="图文会诊" placeholder="请输入活动名"
@confirm="dialogInputConfirm"></uni-popup-dialog>
</uni-popup>
<!-- <van-dialog use-slot title="新建活动信息" :show="show" show-cancel-button @close="onClose_dialog"
@confirm="createActivity">
<van-cell-group>
<van-field value="" placeholder="请输入活动名" :border="false" @change="onChange_meetName" />
</van-cell-group>
</van-dialog> -->
</view>
</template>
这段代码是一个Vue组件的模板部分,它使用了Uni-app框架(一个使用Vue.js开发所有前端应用的框架,可以编译到iOS、Android、Web(包括微信小程序)等多个平台)。这个组件展示了一个多步骤表单,用于收集和处理用户输入的信息,比如患者信息、团队信息和医生信息。以下是对模板中各个部分的详细说明:
<uni-steps>
组件:- 用于显示一个步骤条,
options
属性绑定了steps
数据,active
属性指示当前激活的步骤。 - 这允许用户看到整个流程的概览,并知道他们当前所处的步骤。
- 用于显示一个步骤条,
<scroll-view>
组件:- 提供了一个可滚动的视图区域,
scroll-y="true"
允许用户在垂直方向上滚动。 - 绑定了
scrollTop
属性来控制滚动位置,并监听了scrolltoupper
、scrolltolower
和scroll
事件来处理滚动时的逻辑。
- 提供了一个可滚动的视图区域,
- 条件渲染 (
v-if
):- 根据
activeIndex
的值(当前激活的步骤索引),动态显示不同的表单部分。 - 当
activeIndex
为0时,显示患者选择表单;为1时,显示团队选择表单;为2时,显示医生选择表单。
- 根据
- 表单元素:
- 搜索栏 (
<uni-search-bar>
): 用于搜索患者。 - 复选框组 (
<checkbox-group>
): 在患者和医生选择表单中使用,允许用户选择多个选项。 - 单选按钮组 (
<radio-group>
): 在团队选择表单中使用,允许用户选择一个选项。
- 搜索栏 (
- 按钮:
- 使用了
<uni-row>
和<uni-col>
组件来布局“上一步”和“下一步”按钮,以及在最后一步中的“新建活动”按钮。 - 按钮的显示和禁用状态根据当前步骤(
activeIndex
)来动态调整。
- 使用了
- 弹出框 (
<uni-popup>
和<uni-popup-dialog>
):- 用于显示一个对话框,允许用户输入活动名称。这是一个模态对话框,会阻止用户与对话框之外的其他界面元素交互,直到用户完成输入并确认或取消。
- 注释和未使用的代码:
- 模板中包含了一些被注释掉的代码,这些代码可能是早期的实现或者备选方案。
- 例如,使用了
<van-*>
组件的部分被注释掉了,这些组件来自于Vant Weapp(一个轻量、可靠的移动端Vue组件库),但在当前实现中被<uni-*>
组件替代。
整体上,这个组件通过步骤条、表单元素和按钮的组合,为用户提供了一个结构化的、多步骤的数据输入流程。通过条件渲染和事件处理,实现了动态的用户界面交互和数据处理逻辑。
script代码如下:
<script>
import {
loginRequest
} from '@/api/request.js'
import {
imgUrl
} from '/common/config.js'
export default {
data() {
return {
steps: [{
title: '选择患者',
description: '请选择您的患者信息',
},
{
title: '选择团队',
description: '请选择您的团队信息',
},
{
title: '选择专家',
description: '请选择您的专家信息',
},
],
activeIndex: 0, // 初始步骤索引
searchText: '',
patients: [],
doctors: [],
// result: [],
result_doctor: {}, //选中的医生
date: '',
show: false,
result_group: [], // 用于存储选中的值 group
doctorGroups: [],
memberList: [],
//用于展示对话框
meetName: null,
teamList: [],
postList: [], //职位
selectedPatientIds: {}, // 存储选中的患者ID
current: 0, //当前团队index
gutter: 0,
nvueWidth: 730
}
},
onLoad() {
this.activeIndex == 0
this.getAllPatients();
// this.queryDept();
this.getTeamList();
this.getPostList()
},
computed: {
// isSelected(id) {
// // 检查某个患者ID是否被选中
// //let b=this.selectedPatientIds.includes(id);
// return this.selectedPatientIds.includes(id);;
// },
},
// 在会话框中 点击按钮事件触发的
methods: {
getPostList() {
uni.request({
url: loginRequest.baseURL + 'dict/data/Title',
method: 'GET',
success: (res) => {
if (res.data.code == 200) {
this.postList = res.data.data
}
}
})
},
getTeamList() {
let ui = wx.getStorageSync("userInfo");
console.log(ui)
uni.request({
url: loginRequest.baseURL + 'getTeamList/' + ui.id,
method: 'GET',
success: (res) => {
if (res.data.code == 200) {
this.teamList = res.data.data.map(item => {
return {
value: item.id,
name: item.name
}
})
console.log("teamList", this.teamList);
}
}
})
},
onSearch(searchText) {
this.getAllPatients(searchText.value)
},
// 获取患者信息
getAllPatients(searchText) {
// 注意函数名拼写错误,已更正为 getAllPatients
uni.request({
url: loginRequest.baseURL + 'getAllPatient',
method: 'POST',
data: {
doctorId: wx.getStorageSync("userInfo").id,
searchText: searchText
},
header: {
'auth-token': wx.getStorageSync("token")
},
success: (res) => {
// 使用 switch 语句处理不同的错误码
switch (res.data.code) {
case 200:
// 成功获取数据
this.patients = res.data.data;
break;
case 400:
// 客户端错误,例如请求参数不正确
uni.showToast({
title: '请求参数错误,请重试!',
duration: 300
});
break;
case 401:
// 未授权
uni.showToast({
title: '未授权,请重新登录!',
duration: 300
});
// 可以在这里添加重新登录的逻辑
break;
case 404:
// 资源未找到
uni.showToast({
title: '资源未找到,请检查URL!',
duration: 300
});
break;
case 500:
// 服务器内部错误
uni.showToast({
title: '服务器内部错误,请稍后再试!',
duration: 300
});
break;
default:
// 未知错误码
uni.showToast({
title: res.data.msg || '未知错误',
duration: 300
});
break;
}
},
fail: (error) => {
// 处理网络请求失败的情况
uni.showToast({
title: '网络请求失败,请检查网络连接!',
duration: 300
});
console.error('请求失败:', error);
}
});
},
// 查询部门数据
// queryDept() {
// uni.request({
// url: loginRequest.baseURL + 'dept',
// header: {
// 'auth-token': wx.getStorageSync("token")
// },
// success: (res) => {
// if (res.data.code === 200) {
// // this.deptRange = res.data.data
// const newArr = []
// const dataList = res.data.data;
// dataList.forEach(ite => {
// console.log('ite: ', ite)
// const _item = JSON.parse(JSON.stringify(ite).replace(
// 'name', 'text').replace('id',
// 'value'));
// console.log('_item: ', _item)
// newArr.push(_item)
// })
// console.log('deptrange: ', newArr)
// this.doctorGroups = newArr
// } else {
// uni.showToast({
// title: res.data.msg || '未知',
// duration: 300
// })
// }
// }
// });
// },
queryDoctorList(deptId) {
console.log('dept', deptId);
uni.request({
url: loginRequest.baseURL + 'getAllDoctor/' + deptId + "/" + wx.getStorageSync('userInfo').id,
header: {
'auth-token': wx.getStorageSync("token")
},
success: (res) => {
switch (res.data.code) {
case 200:
if (res.data.data.length === 0) {
uni.showToast({
title: "团队下无专家数据,请联系管理员!",
duration: 300
});
} else {
this.doctors = res.data.data;
}
break;
case 401: // 示例错误码,表示未授权
uni.showToast({
title: "未授权,请重新登录!",
duration: 300
});
// 可以在这里添加重新登录的逻辑
break;
case 404: // 示例错误码,表示资源未找到
uni.showToast({
title: "找不到请求的资源!",
duration: 300
});
break;
case 500: // 示例错误码,表示服务器内部错误
uni.showToast({
title: "服务器内部错误,请稍后再试!",
duration: 300
});
break;
default:
uni.showToast({
title: res.data.msg || '未知错误',
duration: 300
});
break;
}
},
fail: (error) => {
// 处理网络请求失败的情况
uni.showToast({
title: '网络请求失败,请检查网络连接!',
duration: 300
});
console.error('请求失败:', error);
}
});
},
// onChange_group(value) {
// // 更新选中的值
// this.result_group = value;
// console.log('选中的值:', value);
// },
handleChange(index) {
// 处理步骤变更的逻辑,例如更新数据或展示相应的内容
console.log('Step changed to: ' + index);
//this.activeIndex = event.detail.index;
},
handleNext() {
console.log('aaa:', this.activeIndex)
// 处理点击下一步的逻辑,例如更新步骤索引或执行其他操作
if (this.activeIndex === 0) {
console.log('result:', this.selectedPatientIds)
if (this.isSelectedPatientIdsEmpty()) {
uni.showToast({
title: '请先选择患者',
duration: 500
})
return;
}
} else if (this.activeIndex === 1) {
if (this.teamList.length == 0) {
uni.showToast({
title: '请选择团队',
duration: 500
})
return;
}
//判断current是否为空 且是否小于0 是否大于teamList的长度
if (this.current == null || this.current < 0 || this.current >= this.teamList.length) {
uni.showToast({
title: '请选择团队',
duration: 500
})
return;
}
let deptId = this.teamList[this.current].value;
this.queryDoctorList(deptId);
}
this.activeIndex = this.activeIndex === this.steps.length - 1 ? 0 : this.activeIndex + 1;
},
handlePrevious() {
// 处理点击上一步的逻辑,例如更新步骤索引或执行其他操作
this.activeIndex = this.activeIndex === 0 ? this.steps.length - 1 : this.activeIndex - 1;
//console 输出selectedPatientIds
console.log('selectedPatientIds:', this.selectedPatientIds)
//console 输出selectedPatientIds 的类型 与长度
console.log('selectedPatientIds:', typeof this.selectedPatientIds, this.selectedPatientIds.length)
},
//选择患者、医生后 准备创建腾讯会议会话
handleCreateMeet() {
if (this.isSelectedDoctorIdsEmpty()) {
uni.showToast({
title: '没有选择医生',
duration: 500
})
} else {
// this.show = true;
this.inputDialogToggle();
}
},
createActivity() {
console.log('uni.$chat_isSDKReady', uni.$chat_isSDKReady)
console.log('createActivity 方法被触发' + this.meetName);
console.log("meetName:", this.meetName);
let meetName = this.meetName;
if (meetName == '' || meetName == null) {
uni.showToast({
title: '名称不能为空!',
duration: 500
})
return;
}
// todo xj 2024-12-1
// this.show = false;
// //创建tim group
// // let doctorId = this.result_doctor.join()
// this.doctors.forEach(item => {
// if (this.result_doctor.indexOf(item.id) != -1) {
// this.memberList.push({
// userID: item.phone
// })
// }
// });
////////todo let deptId = this.result_group;
// let patineIds = this.result.join();
// let patineIds = this.selectedPatientIds.join();
// let doctorIds = this.result_doctor.join();
// // 创建好友工作群
// let promise = uni.$TUIKit.createGroup({
// type: uni.$TIM.TYPES.GRP_MEETING,
// name: meetName,
// //医生的账号集合--腾讯IM
// memberList: this.memberList
// // 如果填写了 memberList,则必须填写 userID
// });
// let _this = this;
// promise.then(function(imResponse) { // 创建成功
// console.log('imResponse', imResponse.data); // 创建的群的资料
// console.log('imResponse.group', imResponse.data.group); // 创建的群的资料
// let groupID = imResponse.data.group.groupID
// uni.request({
// url: loginRequest.baseURL + 'active/insert',
// method: 'POST',
// header: {
// 'auth-token': wx.getStorageSync("token")
// },
// data: {
// deptId: deptId,
// activeName: meetName,
// patineIds: patineIds,
// doctorIds: doctorIds,
// imGroupId: groupID
// },
// success: (res) => {
// if (res.data.code === 200) {
// // 创建群时指定了成员列表,但是成员中存在超过了“单个用户可加入群组数”限制的情况
// // 一个用户 userX 最多允许加入 N 个群,如果已经加入了 N 个群,此时创建群再指定 userX 为群成员,则 userX 不能正常加群
// // SDK 将 userX 的信息放入 overLimitUserIDList,供接入侧处理
// console.log(imResponse.data
// .overLimitUserIDList); // 超过了“单个用户可加入群组数”限制的用户列表
// //跳转到会话列表页面
// uni.navigateTo({
// url: '/pageB/TUIKit/TUIPages/TUIConversation/index'
// });
// } else {
// uni.showToast({
// title: res.data.msg || '未知',
// duration: 300
// })
// }
// }
// });
// }).catch(function(imError) {
// console.warn('createGroup error:', imError); // 创建群组失败的相关信息
// });
},
// 是否应该放到某个公共模块中加以引用?
onClose_dialog() {
// 关闭对话框的逻辑处理
console.log(this.meetName)
this.show = false;
},
onChange_meetName(val) {
console.log("meetName 变更:", val.detail);
this.meetName = val.detail;
},
toggleCheckbox(index) {
this.patients[index].checked = !this.patients[index].checked;
},
// onDisplay() {
// this.show = true;
// },
// onClose() {
// this.show = false;
// },
formatDate(date) {
date = new Date(date);
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(event) {
const [start, end] = event.detail;
this.show = false;
this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
},
// onChange(event) {
// this.result = event.detail;
// },
onChange_doctor(event) {
// 更新选中医生ID数组
this.result_doctor = event.detail.value;
},
toggle(event) {
const {
index
} = event.currentTarget.dataset;
const checkbox = this.selectComponent(`.checkboxes-${index}`);
checkbox.toggle();
},
checkboxChange(e) {
// 更新选中的患者ID数组
this.selectedPatientIds = e.detail.value;
},
radioChange: function(evt) {
for (let i = 0; i < this.teamList.length; i++) {
if (this.teamList[i].value === evt.detail.value) {
this.current = i;
break;
}
}
},
isSelected(id) {
// 检查某个患者ID是否被选中
//return this.selectedPatientIds.includes(id);
const patientIdStr = id.toString();
return Object.values(this.selectedPatientIds).includes(patientIdStr)
},
isDoctorSelected(id) {
// 检查某个患者ID是否被选中
//return this.selectedPatientIds.includes(id);
const idStr = id.toString();
return Object.values(this.result_doctor).includes(idStr);
},
isSelectedPatientIdsEmpty() {
return Object.keys(this.selectedPatientIds).length === 0;
},
isSelectedDoctorIdsEmpty() {
return Object.keys(this.result_doctor).length === 0;
},
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
},
inputDialogToggle() {
this.$refs.inputDialog.open()
},
dialogInputConfirm(val) {
// uni.showLoading({
// title: '3秒后会关闭'
// })
// setTimeout(() => {
// uni.hideLoading()
// console.log(val)
// this.value = val
// // 关闭窗口后,恢复默认内容
// this.$refs.inputDialog.close()
// }, 3000)
this.meetName = val
// 关闭窗口后,恢复默认内容
this.$refs.inputDialog.close()
},
}
}
</script>
方法说明
- getPostList()
- 发送GET请求获取医生职称列表。
- 成功时,将返回的数据赋值给
this.postList
。
- getTeamList()
- 从本地存储获取用户信息,然后发送GET请求获取团队列表。
- 成功时,将返回的数据处理成特定格式后赋值给
this.teamList
。
- onSearch(searchText)
- 调用
getAllPatinet
方法,传入搜索文本。
- 调用
- getAllPatients(searchText)
- 发送POST请求获取患者信息。
- 请求中包含医生ID和搜索文本。
- 成功时,将返回的数据赋值给
this.patients
;失败时显示错误消息。
- queryDoctorList(deptId)
- 根据部门ID和当前用户ID发送GET请求获取医生列表。
- 成功时,将返回的数据赋值给
this.doctors
;失败时显示错误消息。
- handleChange(index)
- 处理步骤变更的逻辑,例如更新数据或展示相应的内容。
- 目前仅打印了步骤索引。
- handleNext()
- 处理点击下一步的逻辑。
- 根据当前步骤索引执行不同的逻辑,如验证患者和团队选择。
- handlePrevious()
- 处理点击上一步的逻辑。
- 更新步骤索引,并打印选中的患者ID。
- handleCreateMeet()
- 检查是否选择了医生,如果选择了则准备创建会议。
- createActivity()
- 打印一些日志信息,并检查会议名称是否为空。
- onClose_dialog()
- 关闭对话框的逻辑处理。
- onChange_meetName(val)
- 更新会议名称。
- toggleCheckbox(index)
- 切换患者的选中状态。
- formatDate(date)
- 格式化日期。
- onChange_doctor(event)
- 更新选中的医生ID数组。
- toggle(event)
- 切换复选框的选中状态。
- checkboxChange(e)
- 更新选中的患者ID数组。
- radioChange(evt)
- 根据选中的团队值更新当前团队索引。
- isSelected(id)
- 检查某个患者ID是否被选中。
样式代码如下:
<style lang="scss">
.content {
display: flex;
flex-direction: column;
justify-content: center;
/**主轴对齐方式**/
/* background-color: #8f8f94; */
height: 100vh;
align-items: stretch
/**交叉轴对齐方式**/
}
.contentItem {
flex: 1 1 auto;
margin-left: 20rpx;
/* 设置外边距 */
margin-right: 20rpx;
height: 1rpx;
}
.uni-list-cell {
justify-content: flex-start
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.btnClass {
margin-left: 10pt;
margin-right: 10pt;
}
.value-class {
flex: none !important;
}
.cell_checkbox {
float: right
}
.uni-steps {
margin-bottom: 20px;
}
.uni-button {
margin-top: 10px;
}
.demo-uni-row {
margin-bottom: 10px;
// 组件在小程序端display为inline
// QQ、抖音小程序文档写有 :host,但实测不生效
// 百度小程序没有 :host
/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
display: block;
/* #endif */
}
// 支付宝小程序没有 demo-uni-row 层级
// 微信小程序使用了虚拟化节点,没有 demo-uni-row 层级
/* #ifdef MP-ALIPAY || MP-WEIXIN */
::v-deep .uni-row {
margin-bottom: 10px;
}
/* #endif */
.demo-uni-col {
height: 36px;
border-radius: 5px;
}
.view_right {
margin-right: 40rpx;
}
</style>
.content
类中的 Flexbox 布局
-
display: flex;
- 这行代码将
.content
元素的显示类型设置为 Flex 容器。Flex 容器是一个能够使用 Flexbox 布局模型的容器,它允许其子元素以灵活的方式排列和布局。
- 这行代码将
-
flex-direction: column;
- 通过这行代码,Flex 容器的主轴方向被设置为列方向(垂直方向)。这意味着
.content
内的子元素将沿着垂直方向排列。
- 通过这行代码,Flex 容器的主轴方向被设置为列方向(垂直方向)。这意味着
-
justify-content: center;
- 这行代码决定了 Flex 容器内的子元素如何沿着主轴(在这个例子中是垂直方向)分布和对齐。
center
值表示子元素将在主轴方向上居中对齐。
- 这行代码决定了 Flex 容器内的子元素如何沿着主轴(在这个例子中是垂直方向)分布和对齐。
-
align-items: stretch;
-
height: 100vh;
- 这行代码将
.content
元素的高度设置为视口高度的 100%。vh
是一个相对单位,表示视口高度的百分比。在这个例子中,.content
将占据其父元素(通常是页面的整个高度)的全部空间。
- 这行代码将
.contentItem
类中的 Flex 属性
flex: 1 1 auto;
- 这行代码为
.contentItem
元素设置了 Flex 属性。flex
属性是flex-grow
、flex-shrink
和flex-basis
的简写。在这个例子中,flex-grow
和flex-shrink
都被设置为1
,表示子元素可以根据需要增长或缩小;flex-basis
被设置为auto
,表示子元素的默认大小基于其宽度或高度属性。
- 这行代码为