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

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

商品详情页内容块布局

商品详情页固定底部布局

商品详情页布局

头部,内容部分,底部
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"
                            }
                        ]
                    }
                }
            }
        }

实例图片

前端目录结构

• 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