收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
872
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

uni-app 小程序，常用的弹窗模板。弹窗里边显示时间轴

1564人阅读 2024/7/16 11:51 总访问：5418966 评论：0 收藏：0 手机
分类: CSS


弹窗的基础使用以及另外的一些模板可以参考:https://www.tnblog.net/aojiancc2/article/details/7064

基础模板一：弹窗里边一点方块与文字信息(使用的grid布局)

效果图一：

弹窗里边的代码与样式一

  1. <template>
  2.     <view class="popup-container">
  3.         <view class="titleWrap">
  4.             <view class="title">{{ title }}</view>
  5.             <view class="closeTag" @tap="handleClose">×</view>
  6.         </view>
  7.         <view class="splitline"></view>
  9.         <view class="pc-content">
  10.             <view class="pcc-db-warp">
  11.                 <view class="pcc-db-item">
  12.                     <view class="pcc-db-vd-drap">
  13.                         <view class="pcc-dbi-value">18</view>
  14.                         <view class="pcc-dbi-desc">总积分</view>
  15.                     </view>
  16.                 </view>
  17.                 <view class="pcc-db-item">
  18.                     <view class="pcc-db-vd-drap">
  19.                         <view class="pcc-dbi-value">18</view>
  20.                         <view class="pcc-dbi-desc">健康</view>
  21.                     </view>
  22.                 </view>
  23.                 <view class="pcc-db-item">
  24.                     <view class="pcc-db-vd-drap">
  25.                         <view class="pcc-dbi-value">21</view>
  26.                         <view class="pcc-dbi-desc">技术</view>
  27.                     </view>
  28.                 </view>
  29.                 <view class="pcc-db-item">
  30.                     <view class="pcc-db-vd-drap">
  31.                         <view class="pcc-dbi-value">36</view>
  32.                         <view class="pcc-dbi-desc">思维</view>
  33.                     </view>
  34.                 </view>
  35.                 <view class="pcc-db-item">
  36.                     <view class="pcc-db-vd-drap">
  37.                         <view class="pcc-dbi-value">1</view>
  38.                         <view class="pcc-dbi-desc">管理</view>
  39.                     </view>
  40.                 </view>
  41.             </view>
  42.         </view>
  44.     </view>
  45. </template>
  47. <script setup lang="ts">
  48. import { ref, reactive } from 'vue'
  50. // 父组件可以传递参数进来
  51. const props = defineProps({
  52.     title: {
  53.         type: String,
  54.         default: "完成人次"
  55.     },
  56.     userList: {
  57.         type: Array,
  58.         default: []
  59.     }
  60. })
  62. // 触发closePopup事件（关闭事件）
  63. const emit = defineEmits(['closePopup'])
  64. const handleClose = () => {
  65.     emit('closePopup', '参数')
  66. }
  68. </script>
  71. <style lang="scss" scoped>
  72. .popup-container {
  73.     height: 520rpx;
  74.     background-color: #fff;
  75.     border-top-left-radius: 60rpx;
  76.     border-top-right-radius: 60rpx;
  78.     .titleWrap {
  79.         display: flex;
  80.         padding-top: 22rpx;
  81.         padding-left: 20rpx;
  82.         padding-right: 20rpx;
  83.         justify-content: center;
  84.         align-items: center;
  85.         /* 垂直居中 */
  86.         position: relative;
  88.         .title {
  89.             font-family: PingFang SC, PingFang SC;
  90.             font-weight: bold;
  91.             font-size: 36rpx;
  92.             color: #313960;
  93.         }
  95.         .closeTag {
  96.             position: absolute;
  97.             right: 16rpx;
  98.             padding: 10rpx 20rpx;
  99.             font-size: 50rpx;
  100.         }
  101.     }
  103.     .splitline {
  104.         margin-left: -20rpx;
  105.         margin-right: -20rpx;
  106.         margin-top: 30rpx;
  107.         height: 1rpx;
  108.         background: #f3f3f3;
  109.     }
  112.     .pc-content {
  113.         padding-left: 20rpx;
  114.         padding-right: 20rpx;
  116.         .pcc-db-warp {
  117.             display: grid;
  118.             grid-template-columns: repeat(3, 1fr);
  119.             row-gap: 20rpx;
  120.             column-gap: 20rpx;
  121.             margin-top: 26rpx;
  123.             .pcc-db-item {
  124.                 background: #ECF5FF;
  125.                 border-radius: 6rpx 6rpx 6rpx 6rpx;
  126.                 border: 1rpx solid #B3D8FF;
  127.                 height: 106rpx;
  129.                 display: flex;
  130.                 align-items: center;
  131.                 justify-content: center;
  132.                 // flex-direction: column;
  134.                 .pcc-dbi-value {
  135.                     font-size: 24rpx;
  136.                     color: #4D9DF5;
  137.                     text-align: center;
  138.                 }
  140.                 .pcc-dbi-desc {
  141.                     font-weight: 400;
  142.                     font-size: 24rpx;
  143.                     color: #4D9DF5;
  144.                     text-align: center;
  145.                     margin-top: 2rpx;
  146.                 }
  147.             }
  148.         }
  149.     }
  151. }
  152. </style>

弹窗里边那个圆角是在引用弹窗的时候设置的

  1. <uni-popup ref="cgsDetailsPopup" background-color="#fff" border-radius="60rpx 60rpx 0rpx 0rpx;" type="bottom"
  2.       @change="methods.change">
  3.       <cgsDetails @closePopup="popupMethods.closeCgsDetailsDetails" title="许灵灵"> </cgsDetails>
  4.     </uni-popup>


以前圆角以及背景色这些是写到弹窗里边的，但是后面发现有些苹果手机拉到最下面背景有点问题，后面就干脆把圆角以及背景色这些写到引用弹窗组件的地方去了。其实要是能解决手机适配问题，这些写到弹窗里边还通用一点，项目时间比较紧就没有慢慢去研究了。

还有引用弹窗组件以及一些方法等代码也贴一个

  1. import cgsDetails from './component/cgs-details.vue'
  3. const state = reactive({
  4.   popupShow: false,
  5. })
  7. const methods = {
  8.   // 解决滚动穿透
  9.   change: function (e: any) {
  10.     state.popupShow = e.show
  11.   },
  12. }
  15. let cgsDetailsPopup = ref()
  16. const popupMethods = {
  17.   // 打开弹窗
  18.   showCgsDetailsDetails: () => {
  19.     cgsDetailsPopup.value.open()
  20.   },
  21.   // 关闭弹窗
  22.   closeCgsDetailsDetails: () => {
  23.     cgsDetailsPopup.value.close()
  24.   }
  25. }

要解决滚动穿透，需要在页面里边第一个子元素增加一个page-meta

  1. <template>
  2.   <!-- 解决滚动穿透 -->
  3.   <page-meta :page-style="'overflow:' + (state.popupShow ? 'hidden' : 'visible')"></page-meta>
  5.    <view></view>
  6. </template>

基础模板二：弹窗里边使用时间轴，以及每行显示4张图片

效果图二：

弹窗里边的代码与样式二

这里实现了图片超过一行后会自适应布局的，一行显示4张图

弹窗里边的内容

  1. <template>
  2.     <view class="monthTaskDetails-container">
  3.         <view class="titleWrap">
  4.             <view class="title">{{ title }}</view>
  5.             <view class="closeTag" @tap="handleClose">×</view>
  6.         </view>
  7.         <view class="splitline"></view>
  9.         <scroll-view scroll-y="true" style=" height: 700rpx;">
  10.             <view class="timeline-list">
  11.                 <block v-for="(item, index) in 3" :key="index">
  12.                     <view class="timeline-item">
  13.                         <view class="timeline-item_tail"></view>
  14.                         <view class="timeline-item_node"></view>
  15.                         <view class="timeline-item_wrapper">
  17.                             <div>已完成《参加班级扫除道》并上传照片</div>
  18.                             <view class="image-content">
  19.                                 <image class="imgitem" @click="previewImg(0)" mode="scaleToFill"
  20.                                     src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg">
  21.                                 </image>
  22.                                 <image class="imgitem" @click="previewImg(1)"
  23.                                     src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg">
  24.                                 </image>
  25.                                 <image class="imgitem" @click="previewImg(2)"
  26.                                     src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg">
  27.                                 </image>
  28.                                 <image class="imgitem" @click="previewImg(3)"
  29.                                     src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg">
  30.                                 </image>
  32.                                 <image class="imgitem" @click="previewImg(4)"
  33.                                     src="https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg">
  34.                                 </image>
  36.                                 <image class="imgitem" @click="previewImg(5)"
  37.                                     src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg">
  38.                                 </image>
  40.                             </view>
  41.                             <view class="extraData">
  42.                                 <view class="task_time">
  43.                                     2023-08-30 16:53:08
  44.                                 </view>
  45.                                 <image class="deleteimg" src="../../static/delete.png">
  46.                                 </image>
  47.                             </view>
  48.                         </view>
  49.                     </view>
  50.                 </block>
  51.             </view>
  52.         </scroll-view>
  54.     </view>
  55. </template>
  57. <script setup lang="ts">
  58. import { ref, reactive } from 'vue'
  61. const props = defineProps({
  62.     title: {
  63.         type: String,
  64.         default: "完成人次"
  65.     },
  66.     userList: {
  67.         type: Array,
  68.         default: []
  69.     }
  70. })
  72. // 触发closePopup事件
  73. const emit = defineEmits(['closePopup'])
  74. const handleClose = () => {
  75.     emit('closePopup', '参数')
  76. }
  78. // 图片预览
  79. const previewImg = (index = 0) => {
  80.     uni.previewImage({
  81.         urls: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  82.             'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  83.             'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  84.             'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  85.             'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
  86.             'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'],
  87.         current: index
  88.     });
  89. }
  91. </script>
  95. <style lang="scss" scoped>
  96. .monthTaskDetails-container {
  97.     height: 799rpx;
  98.     background-color: #fff;
  99.     border-top-left-radius: 60rpx;
  100.     border-top-right-radius: 60rpx;
  102.     .titleWrap {
  103.         display: flex;
  104.         padding-top: 22rpx;
  105.         padding-left: 20rpx;
  106.         padding-right: 20rpx;
  107.         justify-content: center;
  108.         align-items: center;
  109.         /* 垂直居中 */
  110.         position: relative;
  112.         .title {
  113.             font-family: PingFang SC, PingFang SC;
  114.             font-weight: bold;
  115.             font-size: 36rpx;
  116.             color: #313960;
  117.         }
  119.         .closeTag {
  120.             position: absolute;
  121.             right: 16rpx;
  122.             padding: 10rpx 20rpx;
  123.             font-size: 50rpx;
  124.         }
  125.     }
  127.     .splitline {
  128.         margin-left: -20rpx;
  129.         margin-right: -20rpx;
  130.         margin-top: 30rpx;
  131.         height: 1rpx;
  132.         background: #f3f3f3;
  133.     }
  136.     .image-content {
  138.         margin-top: 10px;
  139.         display: flex;
  140.         flex-wrap: wrap;
  141.         justify-content: space-between;
  143.         .imgitem {
  144.             flex: 0 0 23%;
  145.             /* 动态计算间距 */
  146.             margin-right: calc(8% / 3);
  147.             margin-bottom: 15rpx;
  148.             height: 200rpx;
  149.             background: #F6F6F6;
  150.             border-radius: 0px 0px 0px 0px;
  151.             opacity: 1;
  152.         }
  154.         /* 去除每行尾的多余边距 */
  155.         .imgitem:nth-child(4n) {
  156.             margin-right: 0;
  157.         }
  159.         /* 使最后一个元素的边距填满剩余空间 */
  160.         .imgitem:last-child {
  161.             margin-right: auto;
  162.         }
  163.     }
  165.     .extraData {
  166.         display: flex;
  167.         margin-top: 10rpx;
  168.         align-items: center;
  170.         .task_time {
  171.             font-size: 24rpx;
  172.             color: #909399;
  173.         }
  175.         .deleteimg {
  176.             width: 22rpx;
  177.             height: 22rpx;
  178.             margin-left: 20rpx;
  179.             margin-top: -2rpx;
  180.         }
  181.     }
  182. }
  183. </style>
  187. <!-- 时间轴样式 -->
  188. <style lang="scss" scoped>
  189. .timeline-list {
  190.     margin: 32rpx;
  191.     margin-top: 62rpx;
  192.     font-size: 28rpx;
  193.     list-style: none;
  194. }
  196. .timeline-item:last-child .timeline-item_tail {
  197.     display: none;
  198. }
  200. .timeline-item {
  201.     position: relative;
  202.     padding-bottom: 20rpx;
  203. }
  205. // 时间轴的竖线样式
  206. .timeline-item_tail {
  207.     position: absolute;
  208.     left: 2rpx;
  209.     height: 100%;
  210.     border-left: 2rpx solid rgba(109, 209, 201, 0.3);
  211. }
  213. .timeline-item_node {
  214.     position: absolute;
  215.     background-color: #FFFFFF;
  216.     border-radius: 50%;
  217.     display: flex;
  218.     justify-content: center;
  219.     align-items: center;
  220.     left: -12rpx;
  221.     width: 17rpx;
  222.     height: 17rpx;
  223.     background: #fff;
  224.     border: 6rpx solid #E5E5E5;
  225. }
  227. // 时间轴的第一个圈的颜色
  228. .timeline-item:first-child {
  229.     .timeline-item_node {
  230.         border: 6rpx solid #4D9DF5;
  231.     }
  232. }
  235. .timeline-item_wrapper {
  236.     position: relative;
  237.     // padding: 32rpx 24rpx;
  238.     padding: 32rpx calc(8% / 3) 32rpx 24rpx;
  239.     left: 26rpx;
  240.     top: -39rpx;
  241.     background-color: #ffffff;
  242.     border-radius: 20rpx;
  243. }
  245. .timeline-item_timestamp {
  246.     color: #38254D;
  247.     font-weight: bold;
  248.     font-size: 30rpx;
  249.     line-height: 32rpx;
  250. }
  252. .timeline-item_content {
  253.     display: flex;
  254.     flex-direction: column;
  255.     margin-top: 20rpx;
  256.     margin-bottom: 20rpx;
  258.     text {
  259.         font-size: 26rpx;
  260.         color: #574966;
  261.         line-height: 40rpx;
  262.     }
  264.     .btn {
  265.         align-self: flex-end;
  266.         font-size: 26rpx;
  267.         color: #F06245;
  268.         line-height: 60rpx;
  269.         text-align: center;
  271.         margin-top: -40rpx;
  272.         width: 140rpx;
  273.         height: 60rpx;
  274.         border: 1rpx solid #F06245;
  275.         border-radius: 30rpx;
  276.     }
  277. }
  278. </style>

父组件，使用弹窗的地方

  1. <template>
  2.   <view class="body-view">
  3.     <uni-popup ref="monthTaskDetailsPopup" background-color="#fff" border-radius="60rpx 60rpx 0rpx 0rpx;" type="bottom">
  4.       <monthTaskDetails @closePopup="closeMonthTaskDetails" title="参加班级扫除道"> </monthTaskDetails>
  5.     </uni-popup>
  6.   </view>
  7. </template>
  9. <script setup lang="ts">
  10. import monthTaskDetails from './component/monthTaskDetails.vue'
  12. let monthTaskDetailsPopup = ref()
  13. // 打开弹窗
  14. const showMonthTaskDetails = () => {
  15.   monthTaskDetailsPopup.value.open()
  16. }
  17. // 关闭弹窗
  18. const closeMonthTaskDetails = () => {
  19.   monthTaskDetailsPopup.value.close()
  20. }
  22. </script>

基础模板三：弹窗里边包含tab选择菜单以及最下方包含取消与提交按钮

效果图三：

最下面的按钮

里边也包含一块一块的文字效果，用的flex布局，其实现在使用grid布局来实现更通用一点

弹窗里边的代码与样式三

  1. <template>
  2.     <view class="container">
  3.         <view class="titleWrap">
  4.             <view class="tabMenu">
  5.                 <view :class="state.activeName == 'joinUser' ? 'titlecur' : ''" @click="switchTab('joinUser')"
  6.                     class="title">
  7.                     参与人员</view>
  8.                 <view :class="state.activeName == 'noJoin' ? 'titlecur' : ''" @click="switchTab('noJoin')"
  9.                     class="noJoin ">缺勤人员
  10.                 </view>
  11.             </view>
  12.         </view>
  13.         <view class="splitline"></view>
  14.         <scroll-view scroll-y="true" style=" height: 799rpx;">
  15.             <view class="completeStatusWrap" v-if="state.activeName == 'joinUser'">
  16.                 <view class="userItemWrap completeInfo">
  17.                     <view class="userItem" :class="{ choise: index % 4 === 0 }" v-for="(item, index) in 17"
  18.                         :key="index">张三三
  19.                     </view>
  20.                 </view>
  21.             </view>
  22.             <view class="completeStatusWrap" v-if="state.activeName == 'noJoin'">
  23.                 <view class="userItemWrap noJoinUserWrap">
  24.                     <view class="userItem " :class="{ choise: index % 5 === 0 }" v-for="(item, index) in 17"
  25.                         :key="index">张三三
  26.                     </view>
  27.                 </view>
  28.             </view>
  29.         </scroll-view>
  30.         <view class="perateWrap">
  31.             <view class="pt-cmbwrap">
  32.                 <view class="pt-cancelBut" @tap="handleClose">取消</view>
  33.                 <view class="pt-commitBut">提交</view>
  34.             </view>
  35.         </view>
  36.     </view>
  37. </template>
  39. <script setup lang="ts">
  40. import { ref, reactive } from 'vue'
  43. const state = reactive({
  44.     activeName: "joinUser",
  45. })
  48. const switchTab = (tag: string) => {
  49.     state.activeName = tag
  50. }
  52. // 触发closePopup事件
  53. const emit = defineEmits(['closePopup'])
  54. const handleClose = () => {
  55.     emit('closePopup', '参数')
  56. }
  58. </script>
  61. <style lang="scss" scoped>
  62. .splitline {
  63.     // border: 1rpx solid #E6E6E6;
  64.     margin-left: -20rpx;
  65.     margin-right: -20rpx;
  66.     margin-top: 10rpx;
  67.     height: 1rpx;
  68.     background: #f3f3f3;
  69. }
  71. .container {
  72.     height: 999rpx;
  73.     background-color: #fff;
  74.     border-top-left-radius: 20rpx;
  75.     border-top-right-radius: 20rpx;
  77.     .titleWrap {
  78.         display: flex;
  79.         padding-top: 22rpx;
  80.         justify-content: space-between;
  81.         padding-left: 20rpx;
  82.         padding-right: 20rpx;
  84.         .tabMenu {
  85.             display: flex;
  87.             .title {
  88.                 color: #909399;
  89.                 font-size: 26rpx;
  90.             }
  92.             .noJoin {
  93.                 margin-left: 15rpx;
  94.                 font-size: 26rpx;
  95.                 color: #909399;
  96.             }
  98.             .titlecur {
  99.                 font-size: 30rpx;
  100.                 color: #4D9DF5 !important;
  101.                 position: relative;
  102.             }
  104.             .titlecur:after {
  105.                 content: "";
  106.                 display: inline-block;
  107.                 position: absolute;
  108.                 bottom: -12rpx;
  109.                 left: 0px;
  110.                 width: 100%;
  111.                 border-bottom: 4rpx solid #4D9DF5;
  112.             }
  114.         }
  115.     }
  117.     .completeStatusWrap {
  118.         margin-top: 39rpx;
  119.         padding-left: 20rpx;
  120.         padding-right: 20rpx;
  122.         .userItemWrap {
  123.             background-color: #fff;
  124.             display: flex;
  125.             flex-wrap: wrap;
  126.             justify-content: space-between;
  128.             .userItem {
  129.                 flex: 0 0 31%;
  130.                 /* 动态计算间距,除以2是因为3个元素中间只有2个缝隙 */
  131.                 margin-right: calc(7% / 2);
  132.                 margin-bottom: 15rpx;
  133.                 height: 65rpx;
  134.                 background: #F6F6F6;
  135.                 font-size: 26rpx;
  136.                 border-radius: 6rpx 6rpx 6rpx 6rpx;
  137.                 color: #313960;
  138.                 text-align: center;
  139.                 line-height: 65rpx;
  140.             }
  142.             /* 去除每行尾的多余边距 */
  143.             .userItem:nth-child(3n) {
  144.                 margin-right: 0;
  145.             }
  147.             /* 使最后一个元素的边距填满剩余空间 */
  148.             .userItem:last-child {
  149.                 margin-right: auto;
  150.             }
  151.         }
  153.         .completeInfo {
  154.             .choise {
  155.                 background: #F0F9EB;
  156.                 border: 1rpx solid #C2E7B0;
  157.                 box-sizing: border-box;
  158.                 color: #67C23A;
  159.             }
  160.         }
  162.         .noJoinUserWrap {
  163.             .choise {
  164.                 background: #FEF0F0;
  165.                 border: 1rpx solid #FBC6C6;
  166.                 box-sizing: border-box;
  167.                 color: #F56C6C;
  168.             }
  169.         }
  170.     }
  172.     .perateWrap {
  173.         display: flex;
  174.         justify-content: center;
  176.         .pt-cmbwrap {
  177.             position: absolute;
  178.             bottom: 20rpx;
  179.             display: flex;
  181.             .pt-cancelBut {
  182.                 width: 330rpx;
  183.                 height: 80rpx;
  184.                 border-radius: 10rpx 10rpx 10rpx 10rpx;
  185.                 border: 1rpx solid #4D9DF5;
  187.                 font-size: 36rpx;
  188.                 color: #4D9DF5;
  189.                 text-align: center;
  190.                 line-height: 80rpx;
  191.                 margin-right: 10rpx;
  192.             }
  194.             .pt-commitBut {
  195.                 width: 330rpx;
  196.                 height: 80rpx;
  197.                 background: #4D9DF5;
  198.                 border-radius: 10rpx 10rpx 10rpx 10rpx;
  200.                 font-size: 36rpx;
  201.                 color: #FFFFFF;
  202.                 text-align: center;
  203.                 line-height: 80rpx;
  204.                 margin-left: 10rpx;
  205.             }
  206.         }
  207.     }
  208. }
  209. </style>

基础模板四：非常基础的展示一列数据的弹窗

效果图四：

弹窗里边的代码与样式四

  1. <template>
  2.     <view class="popup-container">
  3.         <view class="titleWrap">
  4.             <view class="title">{{ title }}</view>
  5.             <view class="closeTag" @tap="handleClose">×</view>
  6.         </view>
  8.         <scroll-view scroll-y="true" style=" height: 666rpx;">
  9.             <view class="pc-content">
  10.                 <view class="pcc-item" v-for="(item, index) in 13" :key="index">
  11.                     23级大数据技术1班
  12.                 </view>
  13.             </view>
  14.         </scroll-view>
  15.     </view>
  16. </template>
  18. <script setup lang="ts">
  19. import { ref, reactive } from 'vue'
  21. // 父组件可以传递参数进来
  22. const props = defineProps({
  23.     title: {
  24.         type: String,
  25.         default: ""
  26.     },
  27.     dataList: {
  28.         type: Array,
  29.         default: []
  30.     }
  31. })
  33. // 触发closePopup事件（关闭事件）
  34. const emit = defineEmits(['closePopup'])
  35. const handleClose = () => {
  36.     emit('closePopup', '参数')
  37. }
  39. </script>
  42. <style lang="scss" scoped>
  43. .popup-container {
  44.     height: 766rpx;
  45.     background-color: #fff;
  46.     border-top-left-radius: 60rpx;
  47.     border-top-right-radius: 60rpx;
  49.     .titleWrap {
  50.         display: flex;
  51.         padding-top: 22rpx;
  52.         padding-left: 20rpx;
  53.         padding-right: 20rpx;
  54.         height: 50rpx;
  55.         justify-content: center;
  56.         align-items: center;
  57.         /* 垂直居中 */
  58.         position: relative;
  60.         .title {
  61.             font-family: PingFang SC, PingFang SC;
  62.             font-weight: bold;
  63.             font-size: 36rpx;
  64.             color: #313960;
  65.         }
  67.         .closeTag {
  68.             position: absolute;
  69.             right: 16rpx;
  70.             padding: 10rpx 20rpx;
  71.             font-size: 50rpx;
  72.         }
  73.     }
  75.     .pc-content {
  76.         padding-left: 20rpx;
  77.         padding-right: 20rpx;
  79.         .pcc-db-warp {
  80.             display: grid;
  81.             grid-template-columns: repeat(3, 1fr);
  82.             row-gap: 20rpx;
  83.             column-gap: 20rpx;
  84.             margin-top: 26rpx;
  86.             .pcc-db-item {
  87.                 background: #ECF5FF;
  88.                 border-radius: 6rpx 6rpx 6rpx 6rpx;
  89.                 border: 1rpx solid #B3D8FF;
  90.                 height: 106rpx;
  92.                 display: flex;
  93.                 align-items: center;
  94.                 justify-content: center;
  95.                 // flex-direction: column;
  97.                 .pcc-dbi-value {
  98.                     font-size: 24rpx;
  99.                     color: #4D9DF5;
  100.                     text-align: center;
  101.                 }
  103.                 .pcc-dbi-desc {
  104.                     font-weight: 400;
  105.                     font-size: 24rpx;
  106.                     color: #4D9DF5;
  107.                     text-align: center;
  108.                     margin-top: 2rpx;
  109.                 }
  110.             }
  111.         }
  112.     }
  114.     .pc-content {
  115.         .pcc-item {
  116.             text-align: center;
  117.             font-size: 36rpx;
  118.             color: #313960;
  119.             margin-top: 20rpx;
  120.         }
  121.     }
  123. }
  124. </style>

和上面那个例子一样，就多一个标题和标题下方的分割线

直接上代码

  1. <template>
  2.     <view class="popup-container">
  3.         <view class="titleWrap">
  4.             <view class="title">{{ title }}</view>
  5.             <view class="closeTag" @tap="handleClose">×</view>
  6.         </view>
  8.         <view class="splitline"></view>
  10.         <scroll-view scroll-y="true" style=" height: 666rpx;">
  11.             <view class="pc-content">
  12.                 <view class="pcc-item" v-for="(item, index) in 13" :key="index">
  13.                     重庆应用技术职业学院
  14.                 </view>
  15.             </view>
  16.         </scroll-view>
  17.     </view>
  18. </template>
  20. <script setup lang="ts">
  21. import { ref, reactive } from 'vue'
  23. // 父组件可以传递参数进来
  24. const props = defineProps({
  25.     title: {
  26.         type: String,
  27.         default: "选择院系"
  28.     },
  29.     dataList: {
  30.         type: Array,
  31.         default: []
  32.     }
  33. })
  35. // 触发closePopup事件（关闭事件）
  36. const emit = defineEmits(['closePopup'])
  37. const handleClose = () => {
  38.     emit('closePopup', '参数')
  39. }
  41. </script>
  44. <style lang="scss" scoped>
  45. .popup-container {
  46.     height: 766rpx;
  47.     background-color: #fff;
  48.     border-top-left-radius: 60rpx;
  49.     border-top-right-radius: 60rpx;
  51.     .titleWrap {
  52.         display: flex;
  53.         padding-top: 22rpx;
  54.         padding-left: 20rpx;
  55.         padding-right: 20rpx;
  56.         height: 50rpx;
  57.         justify-content: center;
  58.         align-items: center;
  59.         /* 垂直居中 */
  60.         position: relative;
  62.         .title {
  63.             font-family: PingFang SC, PingFang SC;
  64.             font-weight: bold;
  65.             font-size: 36rpx;
  66.             color: #313960;
  67.         }
  69.         .closeTag {
  70.             position: absolute;
  71.             right: 16rpx;
  72.             padding: 10rpx 20rpx;
  73.             font-size: 50rpx;
  74.         }
  75.     }
  77.     .splitline {
  78.         margin-left: -20rpx;
  79.         margin-right: -20rpx;
  80.         margin-top: 30rpx;
  81.         height: 1rpx;
  82.         background: #f3f3f3;
  83.     }
  85.     .pc-content {
  86.         padding-left: 20rpx;
  87.         padding-right: 20rpx;
  88.         margin-top: 5rpx;
  90.         .pcc-db-warp {
  91.             display: grid;
  92.             grid-template-columns: repeat(3, 1fr);
  93.             row-gap: 20rpx;
  94.             column-gap: 20rpx;
  95.             margin-top: 26rpx;
  97.             .pcc-db-item {
  98.                 background: #ECF5FF;
  99.                 border-radius: 6rpx 6rpx 6rpx 6rpx;
  100.                 border: 1rpx solid #B3D8FF;
  101.                 height: 106rpx;
  103.                 display: flex;
  104.                 align-items: center;
  105.                 justify-content: center;
  106.                 // flex-direction: column;
  108.                 .pcc-dbi-value {
  109.                     font-size: 24rpx;
  110.                     color: #4D9DF5;
  111.                     text-align: center;
  112.                 }
  114.                 .pcc-dbi-desc {
  115.                     font-weight: 400;
  116.                     font-size: 24rpx;
  117.                     color: #4D9DF5;
  118.                     text-align: center;
  119.                     margin-top: 2rpx;
  120.                 }
  121.             }
  122.         }
  123.     }
  125.     .pc-content {
  126.         .pcc-item {
  127.             text-align: center;
  128.             font-size: 36rpx;
  129.             color: #313960;
  130.             margin-top: 20rpx;
  131.         }
  132.     }
  134. }
  135. </style>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

uni-app开始时间与结束时间（结束时间大于开始时间）picker编写
利用uni-app官网里面picker插件代码当点击开始时间后结束时间要大于选择后的开始时间，点击结束时间后开始时间要小于开始时...

uni-app用法与html标签的变化
以前是html标签，比如，现在是小程序组件，比如。那么标签和组件有什么区别，不都是用尖括号包围起来一段英文吗？其实标签...

uni-app无法导入插件
点击网页中右上角的插件导入，可以打开项目，但是就是无法导入插件。是因为，要登录！hbuilder里边也要登录才行，他这个应...

使用uni-app的云端一体插件
初次使用uni-app的云端一体插件步骤还是有点多，也有一些坑，在这里把使用过程记录一下。 一：先下载需要的插件在插件右上...

uni-app中list插件图标问题
如图：他使用uni-icons实现的如果只有text就不会有图标有时候贴的文档不是太完善，还是要下一个完整的插件来对比一下

uni-app发起请求
代码如下：uni.request({ url:&#39;接口地址&#39;, success:(result)=&gt;{ my.lists=result.data; } })注意你的...

uni-app官方文档
https://uniapp.dcloud.io/

uni-app运行与调试
上边有菜单，可以运行到浏览器，也可以运行到内置浏览器运行到内置浏览器的效果：

uni-app引入外部资源，引入外网样式
很简单代码如下：&lt;style&gt; @import&#39;http://image.tnblog.net/amazeui.min.css&#39;; &lt;/style&gt; &lt;st...

uni-app设置起始页
很简单，在pages.json里边配置即可。

uni-app页面无法跳转问题
首先检查一下有没有在pages里边配置没有配置不行的哦或者看看你的跳转方式对不对，如果跳转的是底部菜单，但是你用的是uni....

uni-app 删除失败 setting denied access to....
删除的时候如果文件夹下面还有页面，这样直接删除文件夹是会报错的：删除失败 setting denied access to....这种情况就直接...

uni-app中引入外部js
可以使用代码如下：varscript=document.createElement(&#39;script&#39;); script.src=&quot;http://image.tnblog.net/jqu...

uni-app dom操作
比如引入外部js需要用到的dom操作:varscript=document.createElement(&#39;script&#39;); script.src=&quot;http://image....

uni-app使用web-view引入页面
代码如下：&lt;template&gt; &lt;viewclass=&quot;h5-html&quot;&gt; &lt;web-view:webview-styles=&quot;webviewStyl...

uni-app真机调试
很简单只要手机开启了usb调试，然后hbuilderx会自动获取到手机的然后运行到手机即可华为手机开启use调试：一直点击版本号进...