devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

壁纸小程序Vu3(预览页面:弹窗)

作者：繁依Fanyi0 | 2024-04-08 15:10:23

赞

踩

壁纸小程序Vu3(预览页面:弹窗)

1.展示跳转后的分类列表图片

classlist.vue

 

  1. <template>
  2.   <view class="classlist">
  3.       <view class="content">
  4.             <navigator class="item" v-for="item in 10">
  5.                 <image src="../../common/images/64.png" mode="aspectFill"></image>
  6.             </navigator>
  7.       </view>
  8.   </view>
  9. </template>
  10.  
  11. <script setup>
  12.  
  13. </script>
  14.  
  15. <style lang="scss" scoped>
  16.   
  17. .classlist{
  18.   .content{
  19.     //网格布局
  20.     display: grid;
  21.     grid-template-columns: repeat(3,1fr);
  22.     gap:5rpx;
  23.     padding: 5rpx;
  24.     .item{
  25.       height: 440rpx;
  26.       
  27.       image{
  28.         width: 100%;
  29.         height: 100%;
  30.         display: block;
  31.       }
  32.     }
  33.     
  34.   }
  35. }
  36.   
  37. </style>

2.预览页面(preview.vue)

1)基础布局

  1. <template>
  2.   <view class="preview">
  3.     
  4.      <swiper circular>
  5.         <swiper-item v-for="item in 4">
  6.             <image @click="maskChange" src="../../static/images/2.jpg" mode="aspectFill"></image>
  7.         </swiper-item>
  8.         <swiper-item>
  9.             <image src="../../static/images/1.jpeg" mode="aspectFill"></image>
  10.         </swiper-item>
  11.       </swiper>
  12.       
  13.       <view class="mask" v-if="maskState">
  14.           <view class="goBack"></view>
  15.           <view class="count">3 / 9</view>
  16.           <view class="time">
  17.               <uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
  18.           </view>
  19.           <view class="date">
  20.               <uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
  21.           </view>
  22.           
  23.           <view class="footer">
  24.               <view class="box">
  25.                   <uni-icons type="info" size="28"></uni-icons>
  26.                   <view class="text">信息</view>
  27.               </view>
  28.               
  29.               <view class="box">
  30.                   <uni-icons type="star" size="28"></uni-icons>
  31.                   <view class="text">5分</view>
  32.               </view>
  33.               
  34.               <view class="box">
  35.                   <uni-icons type="download" size="23"></uni-icons>
  36.                   <view class="text">下载</view>
  37.               </view>
  38.           </view>
  39.           
  40.       </view>
  41.       
  42.       
  43.  
  44.   </view>
  45. </template>
  46.  
  47. <script setup>
  48. import { ref } from 'vue';
  49. //遮盖层
  50. const maskState = ref(false)
  51. const maskChange = ()=>{
  52.    maskState.value = !maskState.value
  53. }
  54.  
  55.   
  56. </script>
  57.  
  58. <style lang="scss" > 
  59.  
  60. .preview{
  61.   width: 100%;
  62.     height: 100vh;
  63.     swiper{
  64.       width: 100%;
  65.       height: 100%;
  66.       image{
  67.         width: 100%;
  68.         height: 100%;
  69.       }
  70.     }
  71.     .mask{
  72.       //&>view:紧邻的子元素
  73.       //公用的
  74.       &>view{
  75.         position: absolute;
  76.         left: 0;
  77.         margin: auto;
  78.         color: #fff;
  79.         right: 0;
  80.         //内容多大就有多宽=>自动扩宽
  81.         width: fit-content;
  82.       }
  83.       .goBack{
  84.         
  85.       }
  86.       .count{
  87.         position: absolute;
  88.         top: 10vh;
  89.         background: rgba(0, 0, 0, 0.3);
  90.         font-size: 28rpx;
  91.         border-radius: 40rpx;
  92.         padding: 8rpx 28rpx;
  93.         //模糊效果
  94.         backdrop-filter: blur(10rpx);
  95.       }
  96.       .time{
  97.         font-size: 140rpx;
  98.         top: calc(10vh + 80rpx);
  99.         font-weight: 100;
  100.         line-height: 1em;
  101.         //文字阴影
  102.         text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
  103.       }
  104.       .date{
  105.         font-size: 34rpx;
  106.         top: calc(10vh + 240rpx);
  107.         text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
  108.       }
  109.       .footer{
  110.         background: rgba(255, 255, 255, 0.8);
  111.         bottom: 10vh;
  112.         width: 65vw;
  113.         height: 120rpx;
  114.         border-radius: 120rpx;
  115.         color: #000;
  116.         display: flex;
  117.         //平均分配
  118.         justify-content: space-around;
  119.         //正中间
  120.         align-items: center;
  121.         //避免背景白色时看不到区域
  122.         box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
  123.         backdrop-filter: blur(20rpx);
  124.         .box{
  125.           display: flex;
  126.           flex-direction: column;
  127.           align-items: center;
  128.           justify-content: center;
  129.           //增加触碰区域
  130.           padding: 2rpx 12rpx;
  131.           .text{
  132.             font-size: 26rpx;
  133.             color: $text-font-color-2;
  134.           }
  135.         }
  136.       }
  137.     }
  138.     
  139.     
  140. }
  141.  
  142. </style>

显示时间的组件

<view class="time">
              <uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
          </view>

 .mask{
      //&>view:紧邻的子元素
      //公用的
      &>view{
        position: absolute;
        left: 0;
        margin: auto;
        color: #fff;
        right: 0;
        //内容多大就有多宽=>自动扩宽
        width: fit-content;
      }

top: calc(10vh + 240rpx);是一种CSS样式声明，用于设置元素的垂直位置。

3.弹窗的设置

1).壁纸信息弹窗

  1. <!-- 弹框 -->
  2.       <uni-popup ref="infoPopup" type="bottom">
  3.           <view class="infoPopup">
  4.               <view class="popHeader">
  5.                   <view></view>
  6.                   <view class="title">壁纸信息</view>
  7.                   <view class="close" @click="clickInfoClose">
  8.                     <uni-icons type="closeempty" size="18" color="#999" ></uni-icons>
  9.                   </view>
  10.               </view>
  11.               <!-- scroll-view限制最大区域 -->
  12.               <scroll-view scroll-y>
  13.                   <view class="content">
  14.                       <view class="row" >
  15.                         <view class="label">壁纸ID: </view>
  16.                         <text selectable class="value">112124124sfgd</text>
  17.                       </view>
  18.                    <view class="row">
  19.                     <view class="label">分类：</view>
  20.                     <text class="value class">明星美女</text>
  21.                   </view>
  22.                   <view class="row">
  23.                     <view class="label">发布者：</view>
  24.                     <text class="value">君泺</text>
  25.                   </view>
  26.                   <view class="row">
  27.                     <text class="label">评分：</text>
  28.                     <view class='value roteBox' >
  29.                       <uni-rate readonly touchable value="3.5" size="16"/>
  30.                       <text class="score">5分</text>
  31.                     </view>
  32.                   </view>
  33.                   <view class="row">
  34.                     <text class="label">摘要：</text>
  35.                     <view class='value'>
  36.                       摘要文字内容填充部分，摘要文字内容填充部分，摘要文字内容填充部分，摘要文字内容填充部分。
  37.                     </view>
  38.                   </view>
  39.                   <view class="row">
  40.                     <text class="label">标签：</text>
  41.                     <view class='value tabs'>
  42.                       <view class="tab" v-for="item in 3">标签名</view>
  43.                     </view>
  44.                   </view>	   
  45.                   <view class="copyright">声明：本图片来用户投稿，非商业使用，用于免费学习交流，
  46.                   如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱513894357@qq.com，管理将删除侵权壁纸，维护您的权益。</view>
  47.                   </view>
  48.               </scroll-view>
  49.           </view>
  50.             
  51.       </uni-popup>

 


<script setup>
import { ref } from 'vue';
//遮盖层
const maskState = ref(true)
const infoPopup = ref(null)

//点击info弹窗
const clickInfo = ()=>{
    infoPopup.value.open();
}

//点击关闭信息弹窗
const clickInfoClose = ()=>{
  infoPopup.value.close();
}

const maskChange = ()=>{
   maskState.value = !maskState.value
}
</script>
 

2)评分弹窗

 preview.vue

  1.   <!-- :is-mask-click="false":点击×才能进行关闭，点击空白不关闭 -->
  2.       <uni-popup ref="scorePopup" :is-mask-click="false">
  3.         <view class="scorePopup">
  4.             <view class="popHeader">
  5.                 <view></view>
  6.                 <view class="title" >壁纸评分</view>
  7.                 <view class="close" @click="clickScoreClose">
  8.                   <uni-icons type="closeempty" size="18" color="#999" ></uni-icons>
  9.                 </view>
  10.             </view>
  11.             
  12.             <view class="content">
  13.               <!-- allowHalf:0.5分 -->
  14.                 <uni-rate v-model="userScore" allowHalf></uni-rate>
  15.                 <text class="text">{{userScore}}分</text>
  16.             </view>
  17.           
  18.             <view class="footer">
  19.               <!-- :disabled="!userScore" 只有进行评分时才生效 -->
  20.               <button @click="submitScore"  :disabled="!userScore" type="default"    size="mini" plain>确认评分</button>
  21.             </view>
  22.           
  23.         </view>
  24.       </uni-popup>


<script setup>
import { ref } from 'vue';
//遮盖层
const maskState = ref(true)
const infoPopup = ref(null)
const scorePopup = ref(null)
const userScore = ref(0)
//点击info弹窗
const clickInfo = ()=>{
    infoPopup.value.open();
}
//点击关闭信息弹窗
const clickInfoClose = ()=>{
  infoPopup.value.close();
}
//评分弹窗
const clickScore = () =>{
  scorePopup.value.open();

}
//关闭
const clickScoreClose =  ()=>{
  scorePopup.value.close();

}
const maskChange = ()=>{
   maskState.value = !maskState.value
}

//确认评分
const submitScore = () =>{
  console.log("评分了");
}
</script>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/386370
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号