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

uni-app app,小程序 时间轴样式，时间轴效果。弹窗里边使用时间轴。悬浮菜单

2050人阅读 2024/5/31 17:21 总访问：5415592 评论：0 收藏：0 手机
分类: 前端


虽然可以用一些时间轴组件比如，timeline，但是有时候还是自己写点样式定制性好一点，不需要像组件那么通用。

时间轴效果一

效果图

具体的代码和样式

  1. <template>
  2.     <view class="teaching-dynamics-container">
  3.         <view class="tdc-course-info">
  4.             <view class="tdc-grade">优</view>
  5.             <view class="tdc-coursename">《MySQL数据库设计与实现（第二版）》</view>
  6.         </view>
  7.         <view class="tdc-class-schedule">
  8.             <view class="tdc-classinfo">
  9.                 <view class="tcs-classtag">班级：</view>
  10.                 <view class="tsc-classname">22级移动互联应用技术1班</view>
  11.             </view>
  12.             <view class="tdc-cs-schedule">
  13.                 <view class="tcs-cs-scheduletag">进度：</view>
  14.                 <view class="tsc-cs-schedulename">第3章 MySQL存储引擎和数据类型</view>
  15.             </view>
  16.             <view class="tdc-line"></view>
  17.             <view class="tdc-cs-completeinfo">
  18.                 <view class="tdc-csc-warp">
  19.                     <view>应完成：</view>
  20.                     <view>60%</view>
  21.                 </view>
  22.                 <view class="tdc-csc-warp tdc-csc-warp-right">
  23.                     <view>完成：</view>
  24.                     <view>59%</view>
  25.                 </view>
  26.             </view>
  27.         </view>
  29.         <view class="system-study-situation" style="margin-top: 35rpx">
  30.             <view class="timeline-list">
  31.                 <block v-for="(item, index) in 3" :key="index">
  32.                     <view class="timeline-item">
  33.                         <view class="timeline-item_tail"></view>
  34.                         <view class="timeline-item_node">
  35.                             <view class="timeline-item-innode"></view>
  36.                         </view>
  37.                         <view class="timeline-item_wrapper">
  38.                             <view class="sss-title-complete">
  39.                                 <view class="sss-title">
  40.                                     <view>评估系统</view>
  41.                                     <!-- <view class="sss-grade grade-excellent">优</view> -->
  42.                                     <view class="sss-grade grade-excellent" :class="state.gradeStyle[index]">{{ state.gradeDesc[index] }}</view>
  43.                                 </view>
  44.                                 <view class="sss-complete-info">
  45.                                     <view>完成80%</view>
  46.                                     <view>应完成70%</view>
  47.                                 </view>
  48.                             </view>
  50.                             <view class="sss-chapter-study-situation" v-for="(initem, inindex) in 2" :key="inindex">
  51.                                 <view class="sss-css-item">
  52.                                     <view class="sss-ci-title">第1章MySQL数据库基础</view>
  53.                                     <view class="sss-ci-situation">未开始</view>
  54.                                 </view>
  55.                             </view>
  56.                         </view>
  57.                     </view>
  58.                 </block>
  59.             </view>
  60.         </view>
  61.     </view>
  62. </template>
  63. <script setup lang="ts" name="tasks">
  64. import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
  66. const state = reactive({
  67.     title: '更新',
  68.     schoolID: null,
  69.     // 优，良，差样式
  70.     gradeStyle: {
  71.         0: "grade-excellent",
  72.         1: "grade-good",
  73.         2: "grade-bad",
  74.     },
  75.     // 优，良，差描述
  76.     gradeDesc: {
  77.         0: "优",
  78.         1: "良",
  79.         2: "差",
  80.     }
  81. })
  84. onMounted(() => {
  86. })
  87. </script>
  90. <!-- 时间轴的样式 -->
  91. <style lang="scss" scoped>
  92. .timeline-list {
  93.     margin: 10rpx 0px 10px 5px;
  94.     margin-top: 62rpx;
  95.     font-size: 28rpx;
  96.     list-style: none;
  97. }
  99. .timeline-item:last-child .timeline-item_tail {
  100.     display: none;
  101. }
  103. .timeline-item {
  104.     position: relative;
  105.     padding-bottom: 20rpx;
  106. }
  108. .timeline-item_tail {
  109.     position: absolute;
  110.     left: 4rpx;
  111.     height: 100%;
  112.     border-left: 2rpx solid rgba(109, 209, 201, 0.3);
  113.     // 时间轴左边的线修改为虚线
  114.     border-left-style: dashed;
  115. }
  117. .timeline-item_node {
  118.     position: absolute;
  119.     background-color: #FFFFFF;
  120.     border-radius: 50%;
  121.     display: flex;
  122.     justify-content: center;
  123.     align-items: center;
  124.     left: -8rpx;
  125.     width: 22rpx;
  126.     height: 22rpx;
  127.     background: #fff;
  128.     border: 2rpx solid #6DD1C9;
  130.     .timeline-item-innode {
  131.         width: 14rpx;
  132.         height: 14rpx;
  133.         background: #6DD1C9;
  134.         border-radius: 50%;
  135.     }
  137. }
  139. .timeline-item_wrapper {
  140.     position: relative;
  142.     padding: 26rpx 0rpx 0rpx 0rpx;
  143.     margin-left: 39rpx;
  145.     top: -34rpx;
  146.     background-color: #ffffff;
  147.     border-radius: 20rpx;
  148.     // width: 600rpx;
  149. }
  151. .timeline-item_timestamp {
  152.     color: #38254D;
  153.     font-weight: bold;
  154.     font-size: 30rpx;
  155.     line-height: 32rpx;
  156. }
  158. .timeline-item_content {
  159.     display: flex;
  160.     flex-direction: column;
  161.     margin-top: 20rpx;
  162.     margin-bottom: 20rpx;
  164.     text {
  165.         font-size: 26rpx;
  166.         color: #574966;
  167.         line-height: 40rpx;
  168.     }
  170.     .btn {
  171.         align-self: flex-end;
  172.         font-size: 26rpx;
  173.         color: #F06245;
  174.         line-height: 60rpx;
  175.         text-align: center;
  177.         margin-top: -40rpx;
  178.         width: 140rpx;
  179.         height: 60rpx;
  180.         border: 1rpx solid #F06245;
  181.         border-radius: 30rpx;
  182.     }
  183. }
  184. </style>
  187. <!-- 其他的内容样式 -->
  188. <style scoped="scoped" lang="scss">
  189. .teaching-dynamics-container {
  191.     padding: 39rpx 30rpx 30rpx 30rpx;
  194.     // 优秀
  195.     .grade-excellent {
  196.         background: #5ECDB6;
  197.     }
  199.     // 良好
  200.     .grade-good {
  201.         background: #FF8B64;
  202.     }
  204.     // 差
  205.     .grade-bad {
  206.         background: #FF6363;
  207.     }
  210.     .tdc-line {
  211.         height: 1rpx;
  212.         background: #ECEDEF;
  213.         // background: #ff6666;
  214.         margin-top: 25rpx;
  215.         margin-bottom: 25rpx;
  216.     }
  218.     .tdc-course-info {
  219.         display: flex;
  221.         .tdc-grade {
  222.             width: 54rpx;
  223.             height: 36rpx;
  224.             background: #5ECDB6;
  225.             border-radius: 24rpx 24rpx 0rpx 24rpx;
  227.             text-align: center;
  228.             font-family: PingFang SC, PingFang SC;
  229.             font-weight: 400;
  230.             font-size: 24rpx;
  231.             color: #FFFFFF;
  232.         }
  234.         .tdc-coursename {
  235.             font-family: PingFang SC, PingFang SC;
  236.             font-weight: 400;
  237.             font-size: 28rpx;
  238.             color: #313960;
  239.             padding-left: 13rpx;
  240.         }
  241.     }
  244.     .tdc-class-schedule {
  245.         margin-top: 30rpx;
  246.         // height: 196rpx;
  247.         background: #F7F8FB;
  248.         border-radius: 8rpx 8rpx 8rpx 8rpx;
  249.         padding: 30rpx 30rpx;
  251.         .tdc-classinfo {
  252.             display: flex;
  253.             padding-left: 46rpx;
  255.             .tcs-classtag {
  256.                 color: #B3B3B3;
  257.                 font-size: 24rpx;
  258.                 font-family: PingFang SC, PingFang SC;
  259.             }
  261.             .tsc-classname {
  262.                 color: #313960;
  263.                 font-size: 24rpx;
  264.                 font-family: PingFang SC, PingFang SC;
  265.             }
  266.         }
  268.         .tdc-cs-schedule {
  269.             display: flex;
  270.             margin-top: 20rpx;
  271.             padding-left: 46rpx;
  273.             .tcs-cs-scheduletag {
  274.                 color: #B3B3B3;
  275.                 font-size: 24rpx;
  276.                 font-family: PingFang SC, PingFang SC;
  277.             }
  279.             .tsc-cs-schedulename {
  280.                 color: #313960;
  281.                 font-size: 24rpx;
  282.                 font-family: PingFang SC, PingFang SC;
  283.             }
  284.         }
  286.         .tdc-cs-completeinfo {
  287.             display: flex;
  288.             font-family: PingFang SC, PingFang SC;
  289.             font-weight: 400;
  290.             font-size: 24rpx;
  291.             color: #55B6FF;
  292.             padding-left: 46rpx;
  294.             .tdc-csc-warp {
  295.                 display: flex;
  296.             }
  297.         }
  299.         .tdc-csc-warp-right {
  300.             margin-left: 100rpx;
  301.         }
  302.     }
  305.     .system-study-situation {
  307.         .sss-title-complete {
  308.             display: flex;
  309.             justify-content: space-between;
  310.             align-items: center;
  312.             .sss-title {
  313.                 font-size: 30rpx;
  314.                 color: #313960;
  315.                 display: flex;
  316.                 align-items: center;
  318.                 .sss-grade {
  319.                     width: 39rpx;
  320.                     height: 32rpx;
  321.                     // background: #5ECDB6;
  322.                     border-radius: 10rpx 8rpx 10rpx 8rpx;
  323.                     margin-left: 10rpx;
  325.                     // 微调一下间距
  326.                     margin-top: -4rpx;
  328.                     text-align: center;
  329.                     font-family: PingFang SC, PingFang SC;
  330.                     font-weight: 400;
  331.                     font-size: 24rpx;
  332.                     color: #FFFFFF;
  333.                 }
  334.             }
  336.             .sss-complete-info {
  337.                 display: flex;
  338.                 font-family: PingFang SC, PingFang SC;
  339.                 font-weight: 400;
  340.                 font-size: 24rpx;
  341.                 color: #313960;
  343.                 :last-child {
  344.                     margin-left: 20rpx;
  345.                 }
  346.             }
  348.         }
  351.         .sss-chapter-study-situation {
  352.             .sss-css-item {
  353.                 display: flex;
  354.                 justify-content: space-between;
  355.                 align-items: center;
  357.                 height: 73rpx;
  358.                 background: #F9F9F9;
  359.                 border-radius: 8rpx 8rpx 8rpx 8rpx;
  361.                 font-family: PingFang SC, PingFang SC;
  362.                 font-weight: 400;
  363.                 font-size: 24rpx;
  364.                 color: rgba(0, 0, 0, 0.6);
  365.                 margin-top: 20rpx;
  366.                 padding: 0px 15rpx;
  369.                 // .sss-ci-title {
  370.                 // }
  372.                 // .sss-ci-situation{
  374.                 // }
  375.             }
  376.         }
  379.     }
  381. }
  382. </style>

时间轴效果2

注意横向滚动条的问题


有可能会因为宽度问题出现横向滚动条，注意根据实际情况微调一下样式即可。这里的样式是不会出现横向滚动条的，要改造样式的话注意一下因为宽度问题造成的横向滚动条即可。

一般因为宽度问题出现横向滚动条是因为这里的样式：

  1. .timeline-item_wrapper {
  2.     position: relative;
  3.     padding: 32rpx 24rpx;
  4.     // ****就是这一句,宽度窄的时候不会出现横向滚动条，但是宽度撑满的时候就会出现了****
  5.     left: 42rpx;
  6.     top: -32rpx;
  7.     background-color: #ffffff;
  8.     border-radius: 20rpx;
  9.     width: 600rpx;
  10. }

所以其实建议这样修改更科学一点(通过padding与margin-left来实现不使用left)：

  1. .timeline-item_wrapper {
  2.   position: relative;
  3.   padding: 0rpx 0rpx 20rpx 25rpx;
  5.   // 加一个left可能会出现横向滚动条，体验不太好，可以通过margin-left来设置就不会有问题了
  6.   // left: 32rpx;
  7.   margin-left: 32rpx;
  8.   top: -6rpx;
  9.   background-color: #ffffff;
  10. }

贴的其他例子中，如果timeline-item_wrapper里边使用left来实现位置调整的，都可能有这个问题，就不在累述了，根据上面的规则调整即可

效果图2

具体的代码和样式2

  1. <template>
  2.     <view class="content">
  3.         <view class="describle">
  4.             参加班级、寝室第1次扫除道并上传打扫完之后的图片<span style="color:#4D9DF5">（已完成3次)</span>
  5.         </view>
  6.         <view class="writeContent">
  7.             <textarea style="background-color: #fff;width: 100%;"></textarea>
  8.         </view>
  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.                         <div class="image-content">
  19.                             <image class="imgitem" @click="previewImg(0)" mode="scaleToFill"
  20.                                 src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"></image>
  21.                             <image class="imgitem" @click="previewImg(1)"
  22.                                 src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"></image>
  24.                         </div>
  25.                         <div class="task_time">
  26.                             2023-08-30 16:53:08
  27.                         </div>
  29.                     </view>
  30.                 </view>
  31.             </block>
  32.         </view>
  35.     </view>
  36. </template>
  38. <script setup lang="ts">
  39. import { ref } from 'vue'
  40. const title = ref('Hello')
  42. // import UaTimeline from '@/component/ua-timeline/ua-timeline.vue'
  43. // import UaTimelineItem from '@/component/ua-timeline-item/ua-timeline-item.vue'
  46. const previewImg = (index = 0) => {
  47.     console.log("预览！")
  49.     uni.previewImage({
  50.         urls: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'],
  51.         current: index
  52.     });
  54. }
  56. </script>
  58. <style lang="scss" scoped>
  59. .content {
  60.     background: #F4F6F9;
  62.     .describle {
  63.         // font-size: 32rpx;
  64.         margin-top: 25rpx;
  65.         font-family: PingFang SC-Regular, PingFang SC;
  66.         font-weight: 400;
  67.     }
  69.     .writeContent {
  70.         margin-top: 30rpx;
  71.     }
  73.     .taskContent {
  74.         background-color: #fff;
  75.         margin-top: 30rpx;
  76.         padding-top: 10px;
  77.     }
  79.     .image-content {
  81.         margin-top: 10px;
  82.         display: flex;
  83.         flex-wrap: wrap;
  84.         justify-content: space-between;
  86.         .imgitem {
  87.             flex: 0 0 32%;
  88.             /* 动态计算间距 */
  89.             margin-right: calc(4% / 3);
  90.             // margin-bottom: calc(5% / 3);
  91.             margin-bottom: 6px; // width: 124px;
  93.             height: 139px;
  94.             background: #F6F6F6;
  95.             border-radius: 0px 0px 0px 0px;
  96.             opacity: 1;
  97.         }
  99.         /* 去除每行尾的多余边距 */
  100.         .imgitem:nth-child(3n) {
  101.             margin-right: 0;
  102.         }
  104.         /* 使最后一个元素的边距填满剩余空间 */
  105.         .imgitem:last-child {
  106.             margin-right: auto;
  107.         }
  108.     }
  109. }
  110. </style>
  112. <!-- 时间轴样式 -->
  113. <style lang="scss" scoped>
  114. .timeline-list {
  115.     margin: 32rpx;
  116.     margin-top: 62rpx;
  117.     font-size: 28rpx;
  118.     list-style: none;
  119. }
  121. .timeline-item:last-child .timeline-item_tail {
  122.     display: none;
  123. }
  125. .timeline-item {
  126.     position: relative;
  127.     padding-bottom: 20rpx;
  128. }
  130. .timeline-item_tail {
  131.     position: absolute;
  132.     left: 4rpx;
  133.     height: 100%;
  134.     border-left: 2rpx solid rgba(109, 209, 201, 0.3);
  135. }
  137. .timeline-item_node {
  138.     position: absolute;
  139.     background-color: #FFFFFF;
  140.     border-radius: 50%;
  141.     display: flex;
  142.     justify-content: center;
  143.     align-items: center;
  144.     left: -12rpx;
  145.     width: 22rpx;
  146.     height: 22rpx;
  147.     background: #fff;
  148.     border: 6rpx solid #6DD1C9;
  149. }
  151. .timeline-item_wrapper {
  152.     position: relative;
  153.     padding: 32rpx 24rpx;
  154.     left: 42rpx;
  155.     top: -32rpx;
  156.     background-color: #ffffff;
  157.     border-radius: 20rpx;
  158.     width: 600rpx;
  159. }
  161. .timeline-item_timestamp {
  162.     color: #38254D;
  163.     font-weight: bold;
  164.     font-size: 30rpx;
  165.     line-height: 32rpx;
  166. }
  168. .timeline-item_content {
  169.     display: flex;
  170.     flex-direction: column;
  171.     margin-top: 20rpx;
  172.     margin-bottom: 20rpx;
  174.     text {
  175.         font-size: 26rpx;
  176.         color: #574966;
  177.         line-height: 40rpx;
  178.     }
  180.     .btn {
  181.         align-self: flex-end;
  182.         font-size: 26rpx;
  183.         color: #F06245;
  184.         line-height: 60rpx;
  185.         text-align: center;
  187.         margin-top: -40rpx;
  188.         width: 140rpx;
  189.         height: 60rpx;
  190.         border: 1rpx solid #F06245;
  191.         border-radius: 30rpx;
  192.     }
  193. }
  194. </style>

时间轴效果3(在uni-app小程序弹窗里边使用的)

效果图3

具体的代码和样式3

这里实现了图片超过一行后会自适应布局的，一行显示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>

时间轴效果4(包含grid布局实现一行显示3个文字，图文消息，参与人员与缺勤人员，悬浮菜单等)

效果图4

具体的代码和样式4

  1. <template>
  2.   <view class="content">
  3.     <view class="describle">
  4.       {{ state.taskName }}<text>(已完成3次)</text>
  5.     </view>
  6.     <!-- <view v-for="(stu, index) in 50" :key="index">
  7.       {{index}}
  8.     </view> -->
  9.     <view class="timeline-list">
  10.       <template v-for="item in 3" :key="item.id">
  11.         <view class="timeline-item">
  12.           <view class="timeline-item_tail" />
  13.           <view class="timeline-item_node" />
  14.           <view class="timeline-item_wrapper">
  15.             <view class="stu-name">
  16.               王佳佳
  17.             </view>
  18.             <view class="task-content">已完成《参加班级扫除道》并上传照片</view>
  19.             <view class="image-content">
  20.               <image class="imgitem" v-for="(img, index) in state.imgLists" :key="index" mode="aspectFill" :src="img" />
  21.               <view class="" style="flex: 1" />
  22.             </view>
  24.             <view class="task-person">
  25.               <view class="participant-list">
  27.                 <!-- 参与人员 -->
  28.                 <view class="p-item" v-for="(stu, index) in 15" :key="index">
  29.                   <view class="tp-stu">小明{{ index }}：</view>
  30.                   <view class="tp-status">参与</view>
  31.                 </view>
  33.                 <!-- 缺勤人员 -->
  34.                 <view class="p-item" v-for="(stu, index) in 5" :key="index">
  35.                   <view class="tp-stu">小红{{ index }}：</view>
  36.                   <view class="tp-status-absence">缺勤</view>
  37.                 </view>
  39.               </view>
  40.             </view>
  41.             <view class="task_time">
  42.               2024-7-24 12:30
  43.               <!-- <text class="task-reject">删除</text> -->
  44.             </view>
  45.           </view>
  46.         </view>
  47.       </template>
  48.     </view>
  49.     <view class="task-complate-to"></view>
  50.   </view>
  51. </template>
  53. <script setup lang="ts">
  54. import { ref, reactive } from 'vue'
  55. import { onLoad, onShow } from '@dcloudio/uni-app'
  56. import http from '@/common/request.ts'
  57. import config from '@/common/config.ts'
  58. import dayjs from 'dayjs'
  60. const state = reactive({
  61.   taskName: '参加早迎接活动',
  62.   imgLists: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  63.     'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  64.     'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  65.     'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  66.     'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
  67.     'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg']
  68. })
  70. </script>
  72. <style lang="scss" scoped>
  73. .content {
  74.   background: #f4f6f9;
  76.   .describle {
  77.     padding: 20rpx;
  78.     font-weight: 400;
  79.     font-size: 30rpx;
  80.     color: #313960;
  81.     border-top: 4rpx solid #ededed;
  83.     text {
  84.       margin-left: 20rpx;
  85.       color: #4d9df5;
  86.       font-size: 24rpx;
  87.     }
  88.   }
  90.   .image-content {
  91.     margin-top: 20rpx;
  92.     display: flex;
  93.     flex-wrap: wrap;
  94.     // justify-content: space-between;
  96.     .imgitem {
  97.       width: 31%;
  98.       /* 动态计算间距 */
  99.       margin-right: calc(7% / 2);
  100.       // margin-bottom: calc(5% / 3);
  101.       margin-bottom: 20rpx;
  103.       // height: width;
  104.       height: 199rpx;
  105.       background: #f6f6f6;
  106.       border-radius: 0px 0px 0px 0px;
  107.       opacity: 1;
  108.     }
  110.     /* 去除每行尾的多余边距 */
  111.     .imgitem:nth-child(3n) {
  112.       margin-right: 0px;
  113.     }
  115.     /* 使最后一个元素的边距填满剩余空间 */
  116.     .imgitem:last-child {
  117.       margin-right: auto;
  118.     }
  119.   }
  121.   .task-complate-to {
  122.     width: 108rpx;
  123.     height: 108rpx;
  124.     background: linear-gradient(180deg, #4d9df5 0%, #63cfff 100%);
  125.     box-shadow: 0px 4rpx 10rpx 1rpx rgba(77, 157, 245, 0.32);
  126.     border-radius: 50%;
  127.     position: fixed;
  128.     bottom: 102rpx;
  129.     right: 30rpx;
  130.   }
  132.   .task-complate-to::before {
  133.     content: ' ';
  134.     width: 56rpx;
  135.     border-bottom: 4rpx solid #ffffff;
  136.     position: absolute;
  137.     left: calc(50% - 28rpx);
  138.     top: calc(50% - 2rpx);
  139.   }
  141.   .task-complate-to::after {
  142.     content: ' ';
  143.     height: 56rpx;
  144.     border-right: 4rpx solid #ffffff;
  145.     position: absolute;
  146.     left: calc(50% - 2rpx);
  147.     top: calc(50% - 28rpx);
  148.   }
  149. }
  150. </style>
  152. <style lang="scss" scoped>
  153. .timeline-list {
  154.   font-size: 28rpx;
  155.   list-style: none;
  156.   padding: 30rpx 30rpx 20rpx 30rpx;
  157.   padding-bottom: 0;
  158.   background-color: #ffffff;
  159. }
  161. .timeline-item:last-child .timeline-item_tail {
  162.   display: none;
  163. }
  165. .timeline-item {
  166.   position: relative;
  167.   // padding-bottom: 20rpx;
  169.   .timeline-item_tail {
  170.     position: absolute;
  171.     left: 6rpx;
  172.     top: 0;
  173.     bottom: 0;
  174.     border-left: 2rpx solid rgba(109, 209, 201, 0.3);
  175.   }
  177.   .timeline-item_node {
  178.     position: absolute;
  179.     background-color: #ffffff;
  180.     border-radius: 50%;
  181.     display: flex;
  182.     justify-content: center;
  183.     align-items: center;
  184.     left: -9rpx;
  185.     width: 18rpx;
  186.     height: 18rpx;
  187.     background: #fff;
  188.     border: 6rpx solid #6dd1c9;
  189.   }
  191.   .timeline-item_wrapper {
  192.     position: relative;
  193.     padding: 0rpx 0rpx 20rpx 25rpx;
  195.     // 加一个left可能会出现横向滚动条，体验不太好，可以通过margin-left来设置就不会有问题了
  196.     // left: 32rpx;
  197.     margin-left: 32rpx;
  198.     top: -6rpx;
  199.     background-color: #ffffff;
  201.     // margin-left: 42rpx;
  202.     // border-radius: 20rpx;
  203.     // width: 600rpx;
  204.     .stu-name {
  205.       font-size: 30rpx;
  206.       font-weight: bold;
  207.       color: #174a90;
  208.       margin-bottom: 10rpx;
  209.     }
  211.     .task-content {
  212.       color: #313960;
  213.       font-size: 30rpx;
  214.       font-weight: 400;
  215.     }
  217.     .task-person {
  218.       margin-top: 20rpx;
  219.       font-size: 24rpx;
  221.       .p-item {
  222.         display: flex;
  223.         margin-bottom: 22rpx;
  225.         .tp-stu {
  226.           color: #313960;
  227.         }
  228.       }
  230.       .participant-list {
  231.         display: grid;
  232.         /*每行显示四个，宽度由内容自适应*/
  233.         grid-template-columns: repeat(3, auto);
  234.         /*显示方式为左右无间距，中间均分*/
  235.         justify-content: space-between;
  236.         grid-column-gap: 19rpx;
  238.       }
  240.       .participant-list {
  241.         .tp-status {
  242.           color: #67c23a;
  243.           background: #f0f9eb;
  244.           border-radius: 4rpx;
  245.           padding: 0 10rpx;
  246.         }
  248.         .tp-status-absence {
  249.           color: #f56c6c;
  250.           background: #fef0f0;
  251.           border-radius: 4rpx;
  252.           padding: 0 10rpx;
  253.         }
  254.       }
  256.     }
  258.     .task_time {
  259.       margin-top: 4rpx;
  260.       margin-bottom: 40rpx;
  261.       color: #909399;
  262.       font-size: 24rpx;
  264.       .task-reject {
  265.         color: #f56c6c;
  266.         font-size: 24rpx;
  267.         margin-left: 20rpx;
  268.       }
  269.     }
  270.   }
  271. }
  272. </style>

包含vue绑定数据的也贴一下吧

上面那个是静态的可以直接复制进去看效果的，这个加了一点数据绑定解析的

  1. <template>
  2.   <view class="content">
  3.     <view class="describle">
  4.       {{ state.taskName }}<text>(已完成{{ state.dataList.length }}次)</text>
  5.     </view>
  7.     <view class="timeline-list">
  8.       <template v-for="(item, findex) in state.dataList" :key="findex">
  9.         <view class="timeline-item">
  10.           <view class="timeline-item_tail" />
  11.           <view class="timeline-item_node" />
  12.           <view class="timeline-item_wrapper">
  13.             <view class="stu-name">
  14.               王佳佳
  15.             </view>
  16.             <view class="task-content">{{ item.comment }}</view>
  17.             <view class="image-content">
  18.               <image class="imgitem" v-for="(img, index) in JSON.parse(item.imgJson)" :key="index" mode="aspectFill"
  19.                 :src="GetImgUrl(img)" @tap="previewImg(item.imgJson, index)" />
  20.               <view class="" style="flex: 1" />
  21.             </view>
  23.             <view class="task-person">
  24.               <view class="participant-list">
  26.                 <!-- 参与人员 -->
  27.                 <view class="p-item" v-for="(stu, index) in item.groupUsers" :key="index">
  28.                   <view class="tp-stu">{{ stu }}：</view>
  29.                   <view class="tp-status">参与</view>
  30.                 </view>
  32.                 <!-- 缺勤人员 -->
  33.                 <view class="p-item" v-for="(stu, index) in item.noGroupUsers" :key="index">
  34.                   <view class="tp-stu">{{ stu }}：</view>
  35.                   <view class="tp-status-absence">缺勤</view>
  36.                 </view>
  38.               </view>
  39.             </view>
  40.             <view class="task_time">
  41.               {{dayjs(item.completeDateTime).format('YYYY-MM-DD HH:mm:ss')}}
  42.               <!-- <text class="task-reject">删除</text> -->
  43.             </view>
  44.           </view>
  45.         </view>
  46.       </template>
  47.     </view>
  48.     <view class="task-complate-to" v-if="false"></view>
  49.   </view>
  50. </template>
  52. <script setup lang="ts">
  53. import { ref, reactive } from 'vue'
  54. import { onLoad, onShow } from '@dcloudio/uni-app'
  55. import http from '@/common/request.ts'
  56. import config from '@/common/config.ts'
  57. import dayjs from 'dayjs'
  58. import { GetImgUrl } from '@/common/utils.ts'
  60. const state = reactive({
  61.   taskName: '参加早迎接活动',
  62.   dataList: [] as any
  63. })
  65. onLoad((e) => {
  66.   state.taskName = e?.taskName
  68.   // 设置页面标题
  69.   if (e?.taskName && e?.taskName.length < 18) {
  70.     uni.setNavigationBarTitle({
  71.       title: e?.taskName
  72.     });
  73.   }
  75.   uni.getStorage({
  76.     key: 'studentCompleteDetails',
  77.     success: function (res) {
  78.       state.dataList = res.data
  79.       console.log("跳转过来获得的数据", res.data);
  80.     }
  81.   });
  82. })
  84. // 图片预览
  85. const previewImg = (imgListJson: any, index = 0) => {
  87.   let imgIdList = JSON.parse(imgListJson)
  89.   let imgList = [] as any
  90.   // 根据图片id获取图片的浏览地址
  91.   for (let index = 0; index < imgIdList.length; index++) {
  92.     const element = imgIdList[index];
  93.     imgList.push(GetImgUrl(element))
  94.   }
  96.   uni.previewImage({
  97.     urls: imgList,
  98.     current: index
  99.   });
  100. }
  103. </script>
  105. <style lang="scss" scoped>
  106. .content {
  107.   background: #f4f6f9;
  109.   .describle {
  110.     padding: 20rpx;
  111.     font-weight: 400;
  112.     font-size: 30rpx;
  113.     color: #313960;
  114.     border-top: 4rpx solid #ededed;
  116.     text {
  117.       margin-left: 20rpx;
  118.       color: #4d9df5;
  119.       // font-size: 24rpx;
  120.     }
  121.   }
  123.   .image-content {
  124.     margin-top: 20rpx;
  125.     display: flex;
  126.     flex-wrap: wrap;
  127.     // justify-content: space-between;
  129.     .imgitem {
  130.       width: 31%;
  131.       /* 动态计算间距 */
  132.       margin-right: calc(7% / 2);
  133.       // margin-bottom: calc(5% / 3);
  134.       margin-bottom: 20rpx;
  136.       // height: width;
  137.       height: 199rpx;
  138.       background: #f6f6f6;
  139.       border-radius: 0px 0px 0px 0px;
  140.       opacity: 1;
  141.     }
  143.     /* 去除每行尾的多余边距 */
  144.     .imgitem:nth-child(3n) {
  145.       margin-right: 0px;
  146.     }
  148.     /* 使最后一个元素的边距填满剩余空间 */
  149.     .imgitem:last-child {
  150.       margin-right: auto;
  151.     }
  152.   }
  154.   .task-complate-to {
  155.     width: 108rpx;
  156.     height: 108rpx;
  157.     background: linear-gradient(180deg, #4d9df5 0%, #63cfff 100%);
  158.     box-shadow: 0px 4rpx 10rpx 1rpx rgba(77, 157, 245, 0.32);
  159.     border-radius: 50%;
  160.     position: fixed;
  161.     bottom: 102rpx;
  162.     right: 30rpx;
  163.   }
  165.   .task-complate-to::before {
  166.     content: ' ';
  167.     width: 56rpx;
  168.     border-bottom: 4rpx solid #ffffff;
  169.     position: absolute;
  170.     left: calc(50% - 28rpx);
  171.     top: calc(50% - 2rpx);
  172.   }
  174.   .task-complate-to::after {
  175.     content: ' ';
  176.     height: 56rpx;
  177.     border-right: 4rpx solid #ffffff;
  178.     position: absolute;
  179.     left: calc(50% - 2rpx);
  180.     top: calc(50% - 28rpx);
  181.   }
  182. }
  183. </style>
  185. <style lang="scss" scoped>
  186. .timeline-list {
  187.   font-size: 28rpx;
  188.   list-style: none;
  189.   padding: 30rpx 30rpx 20rpx 30rpx;
  190.   padding-bottom: 0;
  191.   background-color: #ffffff;
  192. }
  194. .timeline-item:last-child .timeline-item_tail {
  195.   display: none;
  196. }
  198. .timeline-item {
  199.   position: relative;
  200.   // padding-bottom: 20rpx;
  202.   .timeline-item_tail {
  203.     position: absolute;
  204.     left: 6rpx;
  205.     top: 0;
  206.     bottom: 0;
  207.     border-left: 2rpx solid rgba(109, 209, 201, 0.3);
  208.   }
  210.   .timeline-item_node {
  211.     position: absolute;
  212.     background-color: #ffffff;
  213.     border-radius: 50%;
  214.     display: flex;
  215.     justify-content: center;
  216.     align-items: center;
  217.     left: -9rpx;
  218.     width: 18rpx;
  219.     height: 18rpx;
  220.     background: #fff;
  221.     border: 6rpx solid #6dd1c9;
  222.   }
  224.   .timeline-item_wrapper {
  225.     position: relative;
  226.     padding: 0rpx 0rpx 20rpx 25rpx;
  228.     // 加一个left可能会出现横向滚动条，体验不太好，可以通过margin-left来设置就不会有问题了
  229.     // left: 32rpx;
  230.     margin-left: 32rpx;
  231.     top: -6rpx;
  232.     background-color: #ffffff;
  234.     // margin-left: 42rpx;
  235.     // border-radius: 20rpx;
  236.     // width: 600rpx;
  237.     .stu-name {
  238.       font-size: 30rpx;
  239.       font-weight: bold;
  240.       color: #174a90;
  241.       margin-bottom: 10rpx;
  242.     }
  244.     .task-content {
  245.       color: #313960;
  246.       font-size: 30rpx;
  247.       font-weight: 400;
  248.     }
  250.     .task-person {
  251.       margin-top: 20rpx;
  252.       font-size: 24rpx;
  254.       .p-item {
  255.         display: flex;
  256.         margin-bottom: 22rpx;
  258.         .tp-stu {
  259.           color: #313960;
  260.         }
  261.       }
  263.       .participant-list {
  264.         display: grid;
  265.         /*每行显示四个，宽度由内容自适应*/
  266.         grid-template-columns: repeat(3, auto);
  267.         /*显示方式为左右无间距，中间均分*/
  268.         justify-content: space-between;
  269.         grid-column-gap: 19rpx;
  271.       }
  273.       .participant-list {
  274.         .tp-status {
  275.           color: #67c23a;
  276.           background: #f0f9eb;
  277.           border-radius: 4rpx;
  278.           padding: 0 10rpx;
  279.         }
  281.         .tp-status-absence {
  282.           color: #f56c6c;
  283.           background: #fef0f0;
  284.           border-radius: 4rpx;
  285.           padding: 0 10rpx;
  286.         }
  287.       }
  289.     }
  291.     .task_time {
  292.       margin-top: 4rpx;
  293.       margin-bottom: 40rpx;
  294.       color: #909399;
  295.       font-size: 24rpx;
  297.       .task-reject {
  298.         color: #f56c6c;
  299.         font-size: 24rpx;
  300.         margin-left: 20rpx;
  301.       }
  302.     }
  303.   }
  304. }
  305. </style>

备注


具体的页面模板以及更多模板存储在云盘里边


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

评价

导出SQL脚本小程序
usingSystem; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Text; usingSystem.Threading.Tasks; ...

微信小程序学习笔记
小程序是什么？小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打...

小程序城市列表实现
小程序城市列表实现实现城市列表选择准备地址数据citydata.jsmodule.exports={ &quot;city&quot;:[ { &quot;title&quot;...

微信扫码---进入小程序指定页面（传参）
使用场景：商场的游戏机，用微信扫码获取机器id，进入到小程序指定页面，进行下单购买。微信公众平台中开发——开发设置—...

小程序html解析如：后台添加的文章详情
项目中遇到在微信小程序里需要显示音乐文章的内容，文章内容是通过接口读取的服 务器中的富文本内容，是html格式的，小程序...

微信小程序canvas的使用
画布。2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染。Canvas 2D 示例代码html:&lt;canvastyp...

微信小程序设置页面导航条颜色
使用wx.setNavigationBarColor(Object object)即可参考代码：wx.setNavigationBarColor({ frontColor:&#39;#ffffff&#39;, ...

uni-app页面跳转与传值。uni-app 小程序 本地存储。传值的编码与解码，传递中文参数
注意跳转的目标页面需要在page.json中申明哦，不然无法跳转哦，应该跳转的目标地址是一个页面，所以需要定义uni-app中页面...

小程序滚动浮窗案例
onPageScroll:function(e){var that=this;if (this.scrollEndTimer) {clearTimeout(this.scrollEndTimer);this.scrollEndTi...

uin小程序滚动浮窗案例
perfToX(){//悬浮按钮向右滑动 this.animation=uni.createAnimation({duration:300,timingFunction:&#39;ease&#39;}) thi...

uni-app弹窗，小程序，弹出层。自定义组件弹窗，解决滚动穿透
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html [TOC]最简单的弹出一句话：需要什么东西在内容...

微信小程序发送验证码
先在js中定义方法post()的部分引入写好api开始引入js的方法获取验证码绑定async getUserBind() { var _this=this; if...

uni-app 微信小程序 上传图片文件，uniapp。uni-file-picker 和数据一起上传图片，上传图片的时候携带数据。多图上传
[TOC]uni-app中上传图片可以使用方法uni.uploadFileuni.uploadFile官方文档：https://uniapp.dcloud.net.cn/api/request/ne...

uni-app 微信小程序 实现图片预览
基本用法：在uniapp中，我们可以使用uni.previewImage()API对图片进行预览，具体使用方法如下： uni.previewImage({ ur...

uni-app 怎么编译到微信开发者工具，运行到微信小程序
在uni-app中填写自己的微信小程序的 AppID在manifest.json中找到微信小程序配置，填写好AppId 在 HBuilderX 中，配置“...

uni-app 组件编译到微信小程序后没有样式文件wxss
组件编译到微信小程序没有生成WXSS文件，H5与APP可以正常显示，小程序不行！ 解决：不需要引用，去除页面中的import这一引...