devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

壁纸小程序Vue3(首页布局)

作者：小小林熬夜学编程 | 2024-04-24 16:14:26

赞

踩

壁纸小程序Vue3(首页布局)

1.创建一个公共目录common来存放css和images

App.vue中引用

<style lang="scss">
    /*每个页面公共css */
  @import 'common/style/common-style.scss';
  
  
</style>
 

 2.渲染轮播图

  1. <template>
  2. 	<view class="homeLayout">
  3.       <view class="banner">
  4.         <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
  5.           indicator-active-color="#fff" autoplay
  6.           circular
  7.         >
  8.           <swiper-item v-for="item in 3" >
  9.               <image src="../../common/images/lxja.webp" mode="widthFix"></image>
  10.           </swiper-item>
  11.         </swiper>
  12.       </view>
  13. 	</view>
  14. </template>
  15.  
  16. <script setup>
  17.  
  18. 	
  19. </script>
  20.  
  21. <style lang="scss" scoped>
  22. 	.homeLayout{
  23.     .banner{
  24.       width: 750rpx;
  25.       padding: 30rpx 0;
  26.       swiper{
  27.         width: 750rpx;
  28.         height: 340rpx;
  29.       
  30.         // swiper-item{}
  31.         //简化
  32.         &-item{
  33.           width: 100%;
  34.           height: 100%;
  35.           padding: 0 30rpx;
  36.           image{
  37.             width: 100%;
  38.             height: 100%;
  39.             border-radius: 10rpx;
  40.           }
  41.         }
  42.       }
  43.     }
  44.   }
  45. </style>

3.公告的轮播

  1.   <view class="notice">
  2.           <view class="left">
  3.               <uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
  4.               <text class="text">公告</text>
  5.           </view>
  6.           <view class="center">
  7.               <swiper vertical autoplay interval="1500" duration="300" circular>
  8.                     <swiper-item v-for="item in 4">文字内容文字内容文字内容文字内容文字内容文字内容</swiper-item>
  9.               </swiper>
  10.           </view>
  11.           <view class="right">
  12.                 <uni-icons type="right" size="16" color="#333"></uni-icons>
  13.           </view>
  14.           
  15.       </view>
  1.   .notice{
  2.       width: 690rpx;
  3.       height: 80rpx;
  4.       line-height: 80rpx;
  5.       background: #f9f9f9;
  6.       margin: 0 auto;
  7.       border-radius: 80rpx;
  8.       display: flex;
  9.       .left{
  10.         width: 140rpx;
  11.         display: flex;
  12.         align-items: center;
  13.         justify-content: center;
  14.         .text{
  15.           color: #28b389;
  16.           font-weight: 600;
  17.           font-size: 28rpx;
  18.         }
  19.       }
  20.       .center{
  21.         flex: 1;
  22.         swiper{
  23.           height: 100%;
  24.           &-item{
  25.             height: 100%;
  26.             font-size: 30rpx;
  27.             color: #666;
  28.             //超出的文字用...替换
  29.             overflow: hidden;
  30.             white-space: nowrap;
  31.             text-overflow: ellipsis;
  32.           }
  33.         }
  34.       }
  35.       .right{
  36.         width: 70rpx;
  37.         display: flex;
  38.         align-items: center;
  39.         justify-content: center;
  40.       }
  41.     }

4.渲染公告下的内容

创建公共标题组件common-title

  1.  <view class="select">
  2.           <common-title></common-title>
  3.           <view class="content">
  4.               <scroll-view scroll-x>
  5.                 <view class="box" v-for="item in 8">
  6.                     <image src="../../common/images/lxja.webp" mode="aspectFill"></image>
  7.                 </view>
  8.               </scroll-view>
  9.           </view>
  10.       </view>

将元素的display属性设置为inline-block可以让元素既有行内元素可以一行显示多个的特性，又有块级元素可以设置宽高的特性。 

 

  1. .select{
  2.       padding-top: 50rpx;
  3.       .content{
  4.         width: 720rpx;
  5.         margin-left: 30rpx;
  6.         margin-top: 30rpx;
  7.         scroll-view{
  8.           white-space: nowrap;
  9.           .box{
  10.             width: 200rpx;
  11.             height: 430rpx;
  12.             display: inline-block;
  13.             margin-right: 15rpx;
  14.             image{
  15.               width: 100%;
  16.               height: 100%;
  17.               border-radius: 10rpx;
  18.             }
  19.           }
  20.           .box:last-child{
  21.             margin-right: 30rpx;
  22.           }
  23.         }
  24.       }
  25.     }

5.引入插槽定义公共标题模块

common-title

  1. <template>
  2.   <view class="common-title">
  3.       <view class="name">
  4.         <!-- 插槽 -->
  5.         <slot name="name"></slot>
  6.       </view>
  7.       <view class="custom">
  8.         <slot name="custom"></slot>
  9.       </view>
  10.   </view>
  11. </template>
  12.  
  13. <script setup>
  14.  
  15. </script>
  16.  
  17. <style lang="scss" scoped>
  18. .common-title{
  19.   display: flex;
  20.   justify-content: space-between;
  21.   align-items: center;
  22.   padding: 0 30rpx;
  23.   .name{
  24.     font-size: 40rpx;
  25.   }
  26. }
  27. </style>

index.vue

  1.   <view class="select">
  2.           <common-title>
  3.               <template #name>每日推荐</template>
  4.               <template #custom>
  5.                 <view class="date">
  6.                     <uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
  7.                     <view>
  8.                         <uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
  9.                     </view>
  10.                 </view>
  11.               </template>
  12.           </common-title>
  13.           <view class="content">
  14.               <scroll-view scroll-x>
  15.                 <view class="box" v-for="item in 8">
  16.                     <image src="../../common/images/lxja.webp" mode="aspectFill"></image>
  17.                 </view>
  18.               </scroll-view>
  19.           </view>
  20.       </view>
  21.       
  22.       <view class="theme">
  23.           <common-title>
  24.             <template #name>专题精选</template>
  25.             <template #custom>
  26.               <navigator url="" class="more">More+</navigator>
  27.             </template>
  28.           </common-title>
  29.       </view>

6.渲染专题精选

 index.vue

  1.  <view class="theme">
  2.           <common-title>
  3.             <template #name>专题精选</template>
  4.             <template #custom>
  5.               <navigator url="" class="more">More+</navigator>
  6.             </template>
  7.           </common-title>
  8.           <view class="content">
  9.               <theme-item v-for="item in 8"></theme-item>
  10.           </view>
  11.       </view>

 

  1. .theme{
  2.         padding-top: 50rpx;
  3.         .more{
  4.           font-size: 32rpx;
  5.           color: #888;
  6.         }
  7.         .content{
  8.           margin-top: 30rpx;
  9.           padding: 0 30rpx;
  10.           //网格布局
  11.           display: grid;
  12.           //每个元素中间有一个间隙
  13.           gap: 15rpx;
  14.           //一行展示三个每行平均分配
  15.           grid-template-columns: repeat(3,1fr);
  16.         }
  17.     }

新创建一个组件them-item

  1. <template>
  2.   <view class="themeTtem">
  3.       <navigator url="" class="box">
  4.         <image class="pic" src="https://img1.baidu.com/it/u=871832137,2572636834&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1198" mode="aspectFill"></image>
  5.         <view class="mask">盛世美颜</view>
  6.         <view class="tab">3天前更新</view>
  7.       </navigator>
  8.   </view>
  9. </template>

.themeTtem{
  .box{
    height: 340rpx;
    border-radius: 10rpx;
    //不加overflow:圆角显示不出来
    overflow: hidden;
    position: relative;
    .pic{
      width: 100%;
      height: 100%;
    }
    .mask{
      width: 100%;
      height: 70rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      //磨砂透明
      background: rgba(0,0,0,0.2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      //模糊滤镜
      backdrop-filter: blur(20rpx);
      font-weight: 600;
      font-size: 30rpx;
    }
    .tab{
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(250,129,90,0.7);
      backdrop-filter: blur(20rpx);
      color: #fff;
      font-size: 22rpx;
      padding: 6rpx 14rpx;
      //左上 右上 右下  左下
      border-radius: 0 0 20rpx 0;
      //网格文字最小为12px,要想小于12px,可进行如下操作
      //缩放
      transform: scale(0.8);
      //以左上角基准偏移
      transform-origin: left top;
    }
  }
}
 

1)渲染更多标题

index.vue

 <view class="theme">
          <common-title>
            <template #name>专题精选</template>
            <template #custom>
              <navigator url="" class="more">More+</navigator>
            </template>
          </common-title>
          <view class="content">
              <theme-item v-for="item in 8"></theme-item>
              <theme-item :isMore="true"></theme-item>
          </view>
      </view>

 them-item

 <view class="themeTtem">
      <navigator url="" class="box" v-if="!isMore">
        <image class="pic" src="https://img1.baidu.com/it/u=871832137,2572636834&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1198" mode="aspectFill"></image>
        <view class="mask">盛世美颜</view>
        <view class="tab">3天前更新</view>
      </navigator>
      <navigator url="" class="box more" v-else>
        <image class="pic" src="https://img1.baidu.com/it/u=351608013,944758287&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=751" mode="aspectFill"></image>
        <view class="mask">
          <uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
          <view class="text">更多</view>
        </view>
      </navigator>
  </view>

.box.more{
    .mask{
      width: 100%;
      height: 100%;
      flex-direction: column;
    }
    .text{
      font-size: 28rpx;
    }
  }

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

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

  

闽ICP备14008679号