UNIAPP实战项目笔记25 商品详情页滚动透明渐变导航栏内容块布局固定底部布局

傷城~ 2024-04-03 10:31 50阅读 0赞

### 商品详情页滚动透明渐变导航栏 ###

### 商品详情页内容块布局 ###

### 商品详情页固定底部布局 ###

#### 商品详情页布局 ####

> 头部,内容部分,底部  
> details.vue

<template>
        <view class="details">
            
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item
                    v-for="(item,index) in swiperList"
                    :key="index"
                >
                    <view class="swiper-item">
                        <image class="swiper-img" :src="item.imgUrl" mode=""></image>
                    </view>
                </swiper-item>
            </swiper>
            
            <view class="details-goods">
                <view class="goods-pprice">¥399.00 </view>
                <view class="goods-oprice">¥599.00 </view>
                <view class="goods-name">大衣绒毛大款貂皮球毛 </view>
            </view>
            
            <view class="">
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
            </view>
            
            
            <Card cardTitle="看了又看"></Card>
            <CommodityList :dataList="dataList"></CommodityList>
            
            
            <view class="details-foot">
                <view class="iconfont icon-xiaoxi"></view>
                <view class="iconfont icon-31gouwuche"></view>
                <view class="add-shopcart">加入购物车</view>
                <view class="purchase">立刻购买</view>
            </view>
        </view>
    </template>
    
    <script>
        import Card from '@/components/common/Card.vue';
        import CommodityList from '@/components/common/CommodityList.vue';
        export default {
        
            data() {
        
                return {
        
                    swiperList:[
                        {
        imgUrl:"../../static/img/b3.jpg"},
                        {
        imgUrl:"../../static/img/b3.jpg"},
                        {
        imgUrl:"../../static/img/b3.jpg"}
                    ],
                    dataList:[{
        
                          id:1,
                          imgUrl:"../../static/logo.png",
                          name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                          pprice:"299",
                          oprice:"659",
                          discount:"5.2"
                      },
                      {
        
                          id:2,
                          imgUrl:"../../static/logo.png",
                          name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                          pprice:"299",
                          oprice:"659",
                          discount:"5.2"
                      },{
        
                          id:3,
                          imgUrl:"../../static/logo.png",
                          name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                          pprice:"299",
                          oprice:"659",
                          discount:"5.2"
                      }]
                };
            },
            components:{
        
                Card,
                CommodityList
            }
        }
    </script>
    
    <style lang="scss">
    swiper{
        
        width: 100%;
        height: 700rpx;
    }
    .swiper-img{
        
        width: 100%;
        height: 700rpx;
    }
    .details{
        
        padding-bottom: 90rpx;
    }
    .details-goods{
        
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
        padding: 10rpx 0;
    }
    .details-img{
        
        width: 100%;
    }
    .details-foot{
        
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFFFFF;
    }
    .details-foot .iconfont{
        
        width: 60rpx;
        height: 60rpx;
        border-radius: 100%;
        background-color: #000000;
        color: #FFFFFF;
        text-align: center;
        margin: 0 10rpx;
        line-height: 60rpx;
    }
    .add-shopcart{
        
        margin: 0 40rpx;
        padding: 6rpx 30rpx;
        background-color: #000000;
        color: #FFFFFF;
        border-radius: 40rpx;
        
    }
    .purchase{
        
        margin: 0 40rpx;
        padding: 6rpx 30rpx;
        background-color: #49BDFB;
        color: #FFFFFF;
        border-radius: 40rpx;
    }
    </style>

#### Commodity组件优化 ####

> 增加点击商品图片跳转到详情  
> 代码如下 Commodity

<template>
        <view class="commodity" 
            :style="'flex-wrap:'+wrap+';'"
        >
            
            <view class="commodity-item"
                v-for="(item,index) in dataList"
                :key="index"
                :style="'width:'+itemW+';'"
                @tap="goDetails"
            >
                <image 
                    class="commodity-img" 
                    :src="item.imgUrl"                 
                    :style="'height:'+bigH+';'"
                    mode=""
                ></image>
                <view class="commodity-content">
                    <text class="commodity-name" :style="'font-size:'+nameSize+';'">{
        {
        item.name}}</text>
                    <view class="">
                        <text class="pprice">${
        {
        item.pprice}}</text>
                        <text class="oprice">${
        {
        item.oprice}}</text>
                    </view>
                    <text class="discount">{
        {
        item.discount}}折</text>
                </view>
            </view>
        </view>
    </template>
    
    <script>
        /* 接受数据  dataList*/
        export default {
        
            props:{
        
                //数据
                dataList:Array,
                // 宽度
                itemW:{
        
                    type:String,
                    default:"375rpx" /* 通过传参数来改变组件默认样式*/
                },
                //高度
                bigH:{
        
                    type:String,
                    default:"375rpx" /* 通过传参数来改变组件默认样式*/
                },
                // 是否换行
                wrap:{
        
                    type:String,
                    default:"wrap" /* 通过传参数来改变组件默认样式*/
                },
                //商品文字大小
                nameSize:{
        
                    type:String,
                    default:"26rpx"
                }
            },
            methods:{
        
                goDetails(){
        
                    uni.navigateTo({
        
                        url:'/pages/details/details'
                    })
                }
            }
        }
    </script>
    
    <style lang="scss">
    .commodity{
        
        display: flex;
    }
    .commodity-item{
        
        padding-bottom: 20rpx;
    }
    .commodity-img{
        
        width: 100%;
    }
    .commodity-content{
        
        text-align: center;
    }
    .commodity-name{
        
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient: vertical;
        color: #333;
        word-break: break-all;
        padding: 6rpx 20rpx;
    }
    .oprice{
        
        text-decoration: line-through;
        font-size: 24rpx;
        color: #999;
    }
    .discount{
        
        border-radius: 4rpx;
        border: 1px solid #FF3333;
        padding: 2rpx 10rpx;
        font-size: 20rpx;
        color: #FF3333;
    }
    
    </style>

#### 设置page.json实现透明渐变导航栏 ####

> 代码如下 page.json部分代码

{
        
                "path" : "pages/details/details",
                "style" :                                                                                    
                {
        
                    "navigationBarTitleText": "商品详情",
                    "app-plus": {
        
                        "scrollIndicator": "none",
                        "titleNView": {
        
                            "type": "transparent",
                            "buttons": [
                                {
        
                                    "type": "menu"
                                },
                                {
        
                                    "type": "share"
                                }
                            ]
                        }
                    }
                }
            }

#### 实例图片 ####

> ![透明渐变导航栏1][1]  
> ![透明渐变导航栏2][2]

#### 前端目录结构 ####

*  manifest.json 配置文件： appid、logo…
 *  pages.json 配置文件： 导航、 tabbar、 路由
 *  main.js vue初始化入口文件
 *  App.vue 全局配置：样式、全局监视
 *  static 静态资源：图片、字体图标
 *  page 页面
    
     *  index
        
         *  index.vue
     *  list
        
         *  list.vue
     *  my
        
         *  my.vue
     *  search
        
         *  search.vue
     *  search-list
        
         *  search-list.vue
     *  shopcart
        
         *  shopcart.vue
     *  details
        
         *  details.vue
 *  components 组件
    
     *  index
        
         *  Banner.vue
         *  Hot.vue
         *  Icons.vue
         *  indexSwiper.vue
         *  Recommend.vue
         *  Shop.vue
     *  common
        
         *  Card.vue
         *  Commondity.vue
         *  CommondityList.vue
         *  Line.vue
         *  ShopList.vue
 *  common 公共文件：全局css文件 || 全局js文件
    
     *  api
        
         *  request.js
     *  common.css
     *  uni.css

[1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/cb3f879293184972be9290147e7393de.png
[2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/4a06248cf6ca448e9a5e65480d33b985.png